title标题
title：{
text:'标题',//图表标题
show:true, //true 显示标题; false 不显示标题;默认显示标题为true
//标题文字样式
textStyle:{
color：,//字体颜色
fontStyle:,//主标题文字字体的风格 normal italic oblique
fontWeight:,//主标题文字字体的粗细
fontFamily:,//主标题文字的字体系列
fontSize:,//主标题文字的字体大小
align:,//文字水平对齐方式，默认自动
verticalAlign:,//文字垂直对齐方式，默认自动
lineHeight:,//行高。
}
backgroundColor：,//背景色，默认透明
borderColor:,//边框颜色
}
legend 图例组件
legend: {
type：,//图例的类型,'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
data: [{
name: '系列1', // 强制设置图形为圆。
icon: 'circle', // 设置文本为红色
textStyle: {
color: 'red'
}
}]
left:,//图例组件离容器左侧的距离
right:,//图例组件离容器右侧的距离。
top:,//图例组件离容器上侧的距离。
bottom:,//图例组件离容器下侧的距离。
align:,//图例标记和文本的对齐。
},
tooltip提示框组件
tooltip: {
show:true,//是否显示提示框组件，包括提示框浮层和 axisPointer。
trigger:,//触发类型。可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'什么都不触发。
axisPointer:{
type:,//指示器类型。'line' 直线指示器,'shadow' 阴影指示器,'none'无指示器',cross'十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
axis:,//指示器的坐标轴
}
},
toolbox 工具栏。
内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
show: true,//是否显示工具栏组件
//各工具配置项。
feature: {
mark: { show: false },//保存的图片格式。支持 'png' 和 'jpeg'。
//保存为图片。
saveAsImage: {
show: true, //是否显示该工具。
title: '保存为图片',// title
type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
}
}
},
xAxis x轴坐标系
xAxis: [
{
show：true,//是否显示 x 轴。默认为true
type: ,//坐标轴类型。
//可选：'value' 数值轴，适用于连续数据。
//'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
//坐标轴轴线相关设置。
axisLine: {
show: false //是否显示坐标轴轴线
},
boundaryGap: ,//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
//坐标轴在 grid 区域中的分隔线。
splitLine: {
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
interval:0,//坐标轴分隔线的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签。
lineStyle: {
color: [], //分隔线颜色，可以设置成单个颜色也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
width: 1,//分隔线线宽。
type: 'dashed' //分隔线线的类型。可选：'solid' 'dashed' 'dotted'
}
},
//x轴指示器
axisPointer: {
show: true, //默认不显示为false
type: 'line', //指示器类型。line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
lineStyle: {
color:, //线的颜色
type:,//线的类型。
width://线的宽度。
},
},
//坐标轴刻度标签的相关设置。
axisLabel:{
show:,//是否显示刻度标签。
padding:,//文字块的内边距
},
data: 数据
}
],
写成函数，方便代码复用
/**
*
* @param data 数据列
* @param lendname 题注系列字段名
* @param xAxisname x轴显示的字段名
* @param cnt 展示的数据字段
* @param title 图表标题
*/
bar(data: Array<any>, lendname: string, xAxisname: string, cnt: string, title: string) {
let SeriesList = [];
//多系列题注
let ydata = Array.from(new Set(data.map((item) => item[lendname])));
//x轴显示的类目
let xdata = Array.from(new Set(data.map((item) => item[xAxisname])));
//系列颜色
let color = ['#FF6384', '#36A2EB', '#FFCE56', '#4dbd74', '#17a2b8', '#ffc107', '#f86c6b', '#63c2de', '#20c997', '#f8cb00', '#e83e8c', '#6f42c1', '#DA70D6', '#6610f2', '#FF8C00'];
let j = 0;
//list数据处理
ydata.forEach(temp => {
let tempData = [];
xdata.forEach(x => {
let curretData;
data.forEach(item => {
if (item[xAxisname] == x && item[lendname] == temp) {
curretData = item[cnt];
}
})
if (curretData > 0) {
tempData.push(curretData);
} else {
tempData.push(0);
}
})
SeriesList.push({
name: temp,
type: 'bar',
data: tempData,
itemStyle: {
color: color[j++],
},
label: {
normal: {
show: true,
position: 'top'
}
},
barWidth: xdata.length <= 10 ? 15 : {} //控制柱体的宽度
})
})
//图形配置
let options = {
title: {
text: title,
},
legend: {
data: ydata,
align: 'left'
},
tooltip: {},
xAxis: {
data: xdata,
silent: false,
boundaryGap: true,
splitLine: {
show: false
},
axisTick: {
alignWithLabel: true,
length: 3
}
},
yAxis: {},
series: SeriesList,
};
return options
}
网友评论