Echarts柱形图颜色设置

最新推荐文章于 2024-05-30 23:16:00 发布

D_SJ

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangym/p/5923365.html

本文介绍如何在ECharts中为每个数据项单独配置颜色。通过在series的data数组中设置itemStyle，可以实现不同数据项显示不同颜色的效果。示例展示了在柱状图中分别配置'未知'、'畅通'、'拥挤'和'堵塞'四种状态的颜色。

ECharts图为每个数据项配置颜色

只需要在series里面给data数组的每个元素设置itemSytle就可以了

option如下：

option = {
    title : {
        text: '高架排队情况'
    },
    tooltip : {
        trigger: 'axis'
    },
    xAxis : [
        {
            type : 'value',
          axisLabel : {
                formatter: '{value} 米'
            }
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['未知','畅通','拥挤','堵塞']
        }
    ],
    series : [
        {
            type:'bar',
          data:[
              {
                value:200,
                itemStyle:{
                  normal:{color:'gray'}
              }
              }, 
              {
                value:300,
                itemStyle:{
                  normal:{color:'green'}
              }
              },
              {
                value:1500,
                itemStyle:{
                  normal:{color:'yellow'}
              }
              },
              {
                value:300,
                itemStyle:{
                  normal:{color:'red'}
              }
              }
            ]
        }
    ]
};