ercharts 曲线图
传入数据x轴数据axisData,标题数据legendData,图表数据seriesData,单位unit。
function getC5option(axisData,legendData, seriesData,unit,) {
var option = {
tooltip: {//鼠标指向图表时显示的数据
trigger: 'axis',
position: function(pt) {
return [pt[0], '10%'];
}
},
title: {
show: false
},
legend: {//右上角的标题,需与seriesData的name对应
data:legendData,
left:'right',
//bottom:'10%',
itemWidth:10,//图例的宽度
itemHeight:10,//图例的高度
textStyle:{//图例文字的样式
color:'#ccc',
fontSize:10
},
},
xAxis: {//x轴
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
width: 1,
color: '#4784af',
},
},
axisLabel: {
show: true,
align: 'top',
textStyle: {
color: '#b8c5df',
},
},
axisTick: {
show: false,
},
data: axisData
},
yAxis: {//y轴
name: unit ? '(' + unit + ')' : '',
nameTextStyle: {
color: '#b8c5df',
},
type: 'value',
splitLine: {
lineStyle: {
type: 'solid',
color: 'rgba(111,199,255,0.35)',
}
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#b8c5df',
},
inside: true,
margin: -10,
},
axisTick: {
show: false
},
},
grid: {
top: 10,
bottom: 50,
},
series: seriesData
};
return option;
}
//当月班组充电量
var legendData1 = ['营业额(元)','电量(kwh)'];
var seriesData1 = [{
name: "营业额(元)",
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgba(42,215,131,0.85)'
}
},
label: {
color: '#b8c5df'
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(42,215,131,0.1)'
}, {
offset: 1,
color: 'rgba(42,215,131,0)'
}])
}
},
data: [100, 300, 800, 1300, 1500, 2000, 2600, 2900, 3000, 2800,2700,2500]
},
{
name: "电量(kwh)",
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgba(0,255,255,0.85)'
}
},
label: {
color: '#b8c5df'
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,255,255,0.1)'
}, {
offset: 1,
color: 'rgba(0,255,255,0)'
}])
}
},
data: [1000, 1200, 1500, 2000, 2200, 2500, 3000, 3500, 3000, 2000,1900,1800]
}
];
var c5 = echarts.init(document.querySelector('#C5'));
c5.setOption(getC5option([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],legendData1,seriesData1,'Kwh',));