//配置参数
options:{
// Make gradient line here
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 100
} ],
title: [{
left: 'center',
text: '门锁耗电曲线'
} ],
tooltip: {
trigger: 'axis'
},
xAxis: [{
data: '',//dataList
}],
yAxis: [{
splitLine: {show: false}
}],
grid: [{
bottom: '50%'
}, {
top: '60%'
}],
series: [{
type: 'line',
showSymbol: true,
data: '',//valueList
itemStyle: {
normal: {
color: 'black',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'green'
}, {
offset: 1,
color: 'red'
}]),//线条渐变色
}
},
emphasis: {
color: 'black',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'green'
}, {
offset: 1,
color: 'red'
}])
}
}
},//线条样式
}],
}
//图标生成
drawBatteryUsingLine:function () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
//向后端获取数据
var data = [["2000-06-05",100],["2000-06-06",90],["2000-06-07",89],["2000-06-08",86],["2000-06-09",73],["2000-06-10",71],["2000-06-11",60],["2000-06-12",60],["2000-06-13",55],["2000-06-14",50],["2000-06-15",45],["2000-06-16",40],["2000-06-17",35],["2000-06-18",33],["2000-06-19",31],["2000-06-20",27],["2000-06-21",25],["2000-06-22",10],["2000-06-23",0]];
var dateList = data.map(item=> {
return item[0];
});
var valueList = data.map(item=> {
return item[1];
});
//options赋值
this.options.xAxis[0].data = dateList;
this.options.series[0].data = valueList;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(this.options);
// 过渡---------------------
myChart.hideLoading();
}