页面树结构
转至元数据结尾
转至元数据起始

(本文档仅供参考)

问题

echarts扩展属性如何实现在饼图中分别给不同的扇区设置颜色且设置透明度?

解决方案

可在图形中增加扩展属性,扩展属性如下:

       

{
        "series": [{
        "data": [{
        "itemStyle": {                                // 多个扇区可设置多个itemStyle
        "color": "rgba(255, 0, 0, 0.2)"      //rgba前三个值为rgb颜色值,最后一个为颜色透明度
        }
        }, {
        "itemStyle": {
        "color": "rgba(0, 255, 0, 0.2)"
        }
        }, {
        "itemStyle": {
        "color": "rgba(0, 0, 255, 0.2)"

        }
        }, {
        "itemStyle": {
        "color": "rgba(0,0,0, 0.2)"
        }
        }, {
        "itemStyle": {
        "color": "rgba(225,200,0, 0.2)"
        }
        }]
        }]
        }


其中扩展属性中的设置如下图:

        


        显示效果如下图:

       


         注:使用扩展属性实现的是对静态数据的颜色以及透明度修改,如果存在扇区个数不断变化的情况,即动态数据,此时需要通过定制宏代码才能实现颜色以及透明度动态变化

        

  • 无标签