Несколько цветов для полосы (yAxis) с использованием echart - PullRequest
Новая
       74

Несколько цветов для полосы (yAxis) с использованием echart

0 голосов
/ 28 мая 2020

Я хочу сделать такую ​​гистограмму, используя ECHARTS :

Я пробовал использовать их пример , но я не нашел опции , чтобы сделать его несколькими цветами.

Я получил ответ здесь , бесполезно делать полосу нескольких цветов.

Я очень мало разбираюсь в eCharts. Кто-нибудь может дать мне ссылку, как я могу это реализовать?

1 Ответ

1 голос
/ 28 мая 2020

Вы хотите иметь разные цвета для каждой серии на панели с накоплением? Просто проведите воображаемую вертикальную линию через все значения ряда и установите стиль цвета для всех значений пересечения. 


{
          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>
...