echarts 折线种不同线段不同颜色的代码

之前在往上搜了几篇文章，目前只发现了两种方法

一种是使用echarts里的配置项 visualMap，但是我没找到根据横坐标的值来改变折线颜色，只有按照series.data里值的范围划分不同颜色

另一种是将series里的data拆分成若干个数组，例如：

原数据为：data=[1,2,3,4,5]

拆分后： data[0]=[1,2,-,-,-],data[1]=[-,2,3,-,-],data[2]=[-,-,3,4,-],data[4]=[-,-,-,4,5]

然后再用series.corlor里赋不同值就可以实现目标。

具体代码如下：

var chartOption = {

		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				axisLine: { onZero: false },
				data: xaxis
			}
		],
		yAxis: [
			{
				name: '总电量',
				type: 'value'
			}
		],
		series: mySeries,
		title: {
			text: '当月用电量',
			subtext: '',
			x: 'left',
			top: 0,
			left: 30,
			align: 'right'
		},
		grid: {
			containLabel: false,
			y: 80,
			left: 60
		},
		toolbox: {
			feature: {
				dataView: { show: true, readOnly: false },
				//dataZoom: {
				//    yAxisIndex: 'none'
				//},
				//restore: {},
				magicType: { show: true, type: ['line', 'bar'] },
				saveAsImage: {},
			},
			right: 60
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				animation: true,

			},
			formatter: function (params) {
				var i = params[0].dataIndex;
				var res = '<p>时间：' + params[i].name + '</p></bar><p>电量：' + params[i].data + '</p>';
				return res;
			},
		},

		legend: {
			data: ['总电量'],
			x: 'center',
			itemGap: 5,//间距
			right: 30,
			top: 30
		}
	}

mySeries值如下：

	function seriesData() {
		var serie = [];

		for (var i = 0; i < zyldata.length; i++) {
			var tempData = [];
			for (var j = 0; j < zyldata.length; j++) {
				if (j == i || j == i + 1) {
					tempData[j] = zyldata[j];
				} else {
					tempData[j] = '-';
				}
			}

			var item = {
				name: '总电量',
				type: 'line',
				animation: false,
				lineStyle: {
					width: 5,
					color: colors[i]
				},
				markPoint: {
					symbol: 'pin',
					symbolSize:10,
					data: [{
						name: '最大值',
						type: 'max'
					}, {
						name: '最小值',
						type: 'min'
					}]
				},
				data: tempData
			}
			serie.push(item);
		};
		return serie;
	}

其中zyldata就是原始的data数据。

效果如下图