vue2/Echarts 简单通过visualMap配置实现折线图线条区域变色

在setOption时，通过在option中添加visualMap配置项实现： 

visualMap: [{
	seriesIndex: 2,// 想要实现变色效果的线条的数组下标值
	show: false,
    type: 'piecewise',// piecewise表示根据区域划分颜色
    //type: 'continuous', continuous表示进行连续型视觉映射，即展现出渐变效果
    dimension: 0,
	pieces:[
		{
			min: this.area_index[0],// 变色区域起始下标
			max: this.area_index[1],// 变色区域终止下标
		},
        //也可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）,value(等于)来表达边界
        {
            gte: 10,
            lte: 20,
            color: 'grey', // 可以单独指定这个区域的颜色
        }
	],
	inRange:{
		color: 'rgb(0, 217, 255)', // 区域内线条颜色
	},
	outOfRange:{
	    color: 'rgb(65, 125, 204)', // 区域外线条颜色
	},
},]

如果两个 piece 的区间重叠，则会自动进行去重。