首页 > 其他分享 >[echarts] markArea显示不同颜色

[echarts] markArea显示不同颜色

时间:2023-03-25 12:05:59浏览次数:38  
标签:颜色 yAxis color itemStyle markArea echarts


[echarts] markArea显示不同颜色_渐变色

[echarts] markArea显示不同颜色_ecmascript_02

markArea:  {
   data: [
        [{
            yAxis: '50',
            itemStyle:{
                color:'#c60c30'
            }
        }, {
            yAxis: '60'
        }],
         [{
            yAxis: '60',
            itemStyle:{
                color:'#25C50E'
            }
        }, {
            yAxis: '80'
        }]
    ],
}

渐变色:

markArea:  {
   data: [
       [
	       {
	           yAxis: '50',
	            itemStyle: {
	                //  看这里,加了这个属性
	                color: new echarts.graphic.LinearGradient(
	                  0,
	                  1,
	                  0,
	                  0,
	                  [
	                    {
	                      offset: 0,
	                      //   color: '#8bd46e'
	                      color: '#00CEFF'
	                    },
	                    {
	                      offset: 1,
	                      // color: '#09bcb7'
	                      color: '#B5F2FF'
	                    }
	                  ],
	                  false
	                )
              }
	        },
	        {
	            yAxis: '100'
	        }
        ],
        
        ... ...    //  如果有多种颜色,就继续在这里写区间数组,复制上面的下来改颜色
    ],
}

[echarts] markArea显示不同颜色_渐变色_03

参考:

echarts图表分区域–显示不同颜色(markArea)


标签:颜色,yAxis,color,itemStyle,markArea,echarts
From: https://blog.51cto.com/u_12881709/6149124

相关文章