//配置参数 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(); }
Echarts 折线图【渐变色】
最新推荐文章于 2024-08-17 10:34:34 发布