来自 eCharts 的不同颜色条形图

Question

I was trying to create a different color bar.我试图创建一个不同的颜色条。 For Mon blue, Tue red, Wed green.周一蓝色，周二红色，周三绿色。 Please help me how to write it.请帮我看看怎么写。 Line itemStyle: {normal: {color: 'blue','red', 'green'}} , did not work. Line itemStyle: {normal: {color: 'blue','red', 'green'}} ，无效。
The code comes from the echarts site.代码来自echarts网站。

 <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {normal: {color: 'blue'}},
            data: [120, 200, 150],
            type: 'bar'
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>

Answer 1

This is my solution:这是我的解决方案：

    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {
                value: 120,
                itemStyle: {color: 'blue'},
            },
            {
                value: 200,
                itemStyle: {color: 'red'},
            },
            {
                value: 150,
                itemStyle: {color: 'green'},
            }
        ],
        type: 'bar'
    }],
    graph: {
        color: colorPalette
    }
};

https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview

Answer 2

The top solution was not working for me.最佳解决方案对我不起作用。From their documentation is seems lineStyle now has two children elements you can leverage 'normal' and 'emphasis'.从他们的文档来看，似乎 lineStyle 现在有两个子元素，您可以利用“正常”和“强调”。 I had to modify it like so to override the default colors:我不得不像这样修改它以覆盖默认颜色：

    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {
                value: 120,
                itemStyle: { normal: { color: 'blue' } },
            },
            {
                value: 200,
                itemStyle: { normal: { color: 'red' } },
            },
            {
                value: 150,
                itemStyle: { normal: { color: 'green' } },
            }
        ],
        type: 'bar'
    }],
    graph: {
        color: colorPalette
    }
};

Answer 3

My solution in June 2019 for needing different colors based on values: Create separate series for the different colors, and use a stacked chart.我在 2019 年 6 月根据值需要不同颜色的解决方案：为不同颜色创建单独的系列，并使用堆叠图表。 For example, I needed to create a graph with green bars for passing values and yellow bars for failing values.例如，我需要创建一个图形，其中绿色条用于传递值，黄色条用于失败值。 This was my implementation:这是我的实现：

var data = {};
data.legendData = ['Sales','HR','Engineering'];
data.greenSeriesData = ['-',96.38,98.43];
data.yellowSeriesData = [44.23,'-','-'];

var option = {
    title: {
        text: '2019 Progress',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: data.legendData
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function (val) {
                return (val) + '%';
            }
        }
    },
    series: [{
        data: data.greenSeriesData,
        type: 'bar',
        stack: 'colorbyvalue',
        label: {
            show: true,
            position: 'insideTop',
            formatter: "{c}%",
            color: '#000000'
        },
        barWidth: 50,
        itemStyle: {
            color: 'green'
        }
    },
    {
        data: data.yellowSeriesData,
        type: 'bar',
        stack: 'colorbyvalue',
        label: {
            show: true,
            position: 'insideTop',
            formatter: "{c}%",
            color: '#000000'
        },
        barWidth: 50,
        itemStyle: {
            color: 'yellow'
        }
    }],
    animation: false
};

Answer 4

you may have an array corresponding to the colors that you need for each day.您可能有一个与您每天需要的颜色相对应的数组。

initially that could be empty and then you push the relevant color to it, depending on that day!最初它可能是空的，然后你将相关的颜色推送给它，具体取决于那天！

  var cars1 = data.data_1;

  var color_bar = [];

  var text = "";
  var i;

  for (i = 0; i < cars1.length; i++)
    {
    if (cars1[i] < 20.35) {
        color_bar.push("red");
          }  
        else {
      color_bar.push("yellow");
    }

  }

and the you call the relevant color for each data series...并且您为每个数据系列调用相关颜色...

yAxis: {
              type: 'value'
          },
          series: [{
              data: 
              [
            {
                value: data.data_1[0],
                itemStyle: {color: color_bar[0]},
            },{
                value: data.data_1[1],
                itemStyle: {color: color_bar[1]},
            },{
                value: data.data_1[2],
                itemStyle: {color: color_bar[2]},
            }],

Here I worked out an example based on value, but conditioning "day" should be ok.在这里，我根据价值制定了一个示例，但调节“一天”应该没问题。

I hope this helps mate.我希望这有助于伙计。

Answer 5

After a day of research got this answer => add itemStyle with seriesIndex as params经过一天的研究得到了这个答案 => 添加 itemStyle 和 seriesIndex 作为参数

var option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [ 120,200,150],
    type: 'bar',
    itemStyle: {
      // HERE IS THE IMPORTANT PART
      color: (seriesIndex) => yourCustomFunctionName(seriesIndex) // you will get access to array data passed and its index values
     },
    }],
    graph: {
    color: colorPalette
 }
};

来自 eCharts 的不同颜色条形图

问题描述

5 个解决方案

解决方案1
34 已采纳 2018-03-08 12:24:15

解决方案2
8 2019-07-23 21:35:11

解决方案3
2 2019-06-10 14:51:02

解决方案4
0 2021-05-02 18:59:21

解决方案5
0 2023-01-13 16:35:35

来自 eCharts 的不同颜色条形图

问题描述

5 个解决方案

解决方案1 34 已采纳 2018-03-08 12:24:15

解决方案2 8 2019-07-23 21:35:11

解决方案3 2 2019-06-10 14:51:02

解决方案4 0 2021-05-02 18:59:21

解决方案5 0 2023-01-13 16:35:35

解决方案1
34 已采纳 2018-03-08 12:24:15

解决方案2
8 2019-07-23 21:35:11

解决方案3
2 2019-06-10 14:51:02

解决方案4
0 2021-05-02 18:59:21

解决方案5
0 2023-01-13 16:35:35