使用 echart 的条形（yAxis）的多种颜色答案

【问题标题】：Multiple color for a bar(yAxis) using echart使用 echart 的条形（yAxis）的多种颜色
【发布时间】：2023-03-23 05:58:01
【问题描述】：

我想使用ECHARTS 制作这样的条形图：

我尝试过使用他们的example，但我没有找到任何option 来使其具有多种颜色。

我得到了答案here，将条形制作成多种颜色是没有用的。

我对 eCharts 知之甚少。谁能给我任何参考，我该如何实现它？

【问题讨论】：

标签： javascript reactjs echarts

【解决方案1】：

您希望堆叠栏中的每个系列都有不同的颜色吗？只需在所有系列值上画一条假想的垂直线，并为所有交叉值设置颜色样式。


{
          name: 'Series-1',
          type: 'bar',
          stack: '1',
          data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
      },{
          name: 'Series-2',
          type: 'bar',
          stack: '1',
          data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
      }

  var myChart = echarts.init(document.getElementById('main'));
  var option = {
      title: {
          text: 'ECharts'
      },
      tooltip: {},
      legend: {
          data:['Label']
      },
      xAxis: {
          data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
      },
      yAxis: {},
      series: [{
          name: 'Series-1',
          type: 'bar',
          stack: '1',
          data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
      },{
          name: 'Series-2',
          type: 'bar',
          stack: '1',
          data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
      }
      ]
  };

  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

【讨论】：

就我而言，某些条形图只需要一种颜色。比如说，在你的例子中，如果我想让 Category3 栏只有黄色，我该怎么做？
如果您想象一个值矩阵，其中普通条使用水平一行，然后堆栈使用垂直一行。如果你想获得单色的堆栈栏，那么你需要通过垂直这个颜色来设置每个系列的值。
在我上面的示例中，您需要将蓝色更改为绿色，然后您就会得到想要的结果。
是的。我得到了它。如果我遇到任何问题，我会尽快回复您。