[echarts] markArea显示不同颜色

533_

已于 2023-03-23 17:41:42 修改

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2023-03-22 09:44:01 首次发布

本文链接：https://blog.csdn.net/qq_14993591/article/details/129702969

echarts 专栏收录该内容

74 篇文章

订阅专栏

文章介绍了如何在Echarts图表中使用markArea数据项来定义特定的图形区域，并展示如何配置渐变色，例如从#00CEFF平滑过渡到#B5F2FF。通过设置LinearGradient和offset属性，可以实现不同颜色区间的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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'
	        }
        ],
        
        ... ...    //  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
    ],
}