|
新年开工了，上班第一天就是写代码写代码。之前写了和总结了不少关于echarts的图表，今天产品给告诉我在折线中添加平均值，那就加吧。还是老规矩看下效果图。
var dom = document.getElementById("lineUnit");
var myChart = echarts.init(dom);
var app = {};
var option;
var colorList = ['#1FD6C1', '#168eff'];
var data1 = [];
var data2 = [];
var data3 = [];
option = {
grid: {
top: '10%',
right: '2%',
bottom: '10%',
left: '4%'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '' + params[i].seriesName + ' : ' + params[i].value + "元";
}
return relVal;
}
},
legend: {
//show: false
orient: 'horizontal',
x: 'right', //图例位置
y:'10px',
itemWidth: 12, //图例宽
itemHeight: 12, //图例高
itemGap: 40, //图例之间间距
padding:[0,20,0,0],
textStyle: {
color: '#333', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
},
xAxis: {
type: 'category',
//boundaryGap: false, //去除图表四周留白
axisTick: { //x轴刻度尺
show: false
},
axisLine: { //x轴线条颜色
show: true,
lineStyle: {
color: '#dadada',
width: 0.5
}
},
axisLabel: { //x轴文字倾斜
show: true,
//rotate: 40, //文字倾斜度
textStyle: {
color: '#333', //更改坐标轴文字颜色
fontSize: 15 //更改坐标轴文字大小
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
//interval:500,//刻度值间隔值
name: '',
nameTextStyle: {
padding: [0, 30, 5, 0], // y轴name位置
color: '#333', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
splitLine: {
show: true, //关闭网格线
lineStyle: {
color: '#dadada',
width: 0.5
}
},
axisLine: { //y轴线条颜色
show: true,
lineStyle: {
color: '#dadada',
width: 0.5
}
},
axisLabel: { //y轴文字倾斜
textStyle: {
color: '#333', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
},
series: [{
data: [220, 432, 330, 530, 620, 420, 732, 530, 630, 620, 720, 1332],
type: 'line',
name: '乌市全年月销',
symbolSize: 8, //设定实心点的大小
smooth: true, //面积图改成弧形状
lineStyle: {
normal: {
color: { //外边线颜色
type: 'linear',
colorStops: [{
offset: 0,
color: '#A9F387' // 0% 处的颜色
}, {
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
width: 3, //外边线宽度
shadowColor: "#1FD6C1", //线阴影颜色
shadowOffsetY: 15, //阴影大小
shadowBlur: 20
}
},
itemStyle: {
normal: { //节点颜色
color: colorList[0],
borderColor: colorList[0],
}
},
markLine: {//图表标线
data: [{ type: 'average', name: '平均值' }],//type: 'average', 平均值, min最小值, max 最大值, median中位数
},
label: { //显示当前柱形数值
show: true,
position: 'top',
textStyle: {
color: '#000', //更改坐标轴文字颜色
fontSize: 15 //更改坐标轴文字大小
}
},
showSymbol: true, //去除面积图节点圆
},
{
data: [120, 232, 130, 330, 820, 620, 532, 630, 430, 720, 620, 932],
type: 'line',
name: '喀什全年月销',
symbolSize: 8, //设定实心点的大小
smooth: true, //面积图改成弧形状
lineStyle: {
normal: {
color: { //外边线颜色
type: 'linear',
colorStops: [{
offset: 0,
color: '#90d6ff' // 0% 处的颜色
}, {
offset: 1,
color: '#3ba6fd' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
width: 3, //外边线宽度
shadowColor: "#3ba6fd", //线阴影颜色
shadowOffsetY: 15, //阴影大小
shadowBlur: 20
}
},
itemStyle: {
normal: { //节点颜色
color: colorList[1],
borderColor: colorList[1],
}
},
markLine: {
data: [{ type: 'average', name: '平均值' }],
},
label: { //显示当前柱形数值
show: true,
position: 'top',
textStyle: {
color: '#000', //更改坐标轴文字颜色
fontSize: 15 //更改坐标轴文字大小
}
},
showSymbol: true, //去除面积图节点圆
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
};
window.addEventListener("resize",function (){
echarts.init(document.getElementById('lineUnit')).resize();
});
markLine在echarts官方文档中解释为图表标线。这里只是简单的实现了图表标线，如果大家需要深入的了解markLine中其他属性，可以参考官方文档。
|