使用echart为一个条形图(yAxis)提供多种颜色。

Question

我想做一个这样的条形图，使用的是 ECHARTS :

我已经尝试使用他们的 例子但我没有发现任何 选择权 使之成为多种颜色。

我得到了一个答案 此处但如果把一个条形图做成多种颜色，那就没有用了。

我对电子图表的知识知之甚少。有谁能给我任何参考，我如何实现它？

Answer 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/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>