使用echart的条形(yAxis)的多种颜色 [英] Multiple color for a bar(yAxis) using echart

问题描述

我想使用 ，但我没有找到任何 option 使其具有多种颜色.

我在这里得到了答案，将条形设为多种颜色是没有用的.

我对电子图表知之甚少.任何人都可以给我任何参考我如何实施它?

解决方案

您希望堆叠条中的每个系列都有不同的颜色吗?只需在所有系列值上绘制假想的垂直线并为所有交叉值设置颜色样式.

{name: '系列 1',类型:'酒吧'，堆栈:'1'，数据: [5, { 值: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]},{name: '系列 2',类型:'酒吧'，堆栈:'1'，数据: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]}

 var myChart = echarts.init(document.getElementById('main'));变量选项 = {标题: {文本:'ECharts'},工具提示:{}，传奇: {数据:['标签']},x轴:{数据:[Category1"、Category2"、Category3"、Category4"、Category5"、Category6"]},y轴:{}，系列: [{name: '系列 1',类型:'酒吧'，堆栈:'1'，数据: [5, { 值: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]},{name: '系列 2',类型:'酒吧'，堆栈:'1'，数据: [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>

I want to make a bar-chart like this using ECHARTS :

I have tried using their example, but I don't find any option to make it multiple colors.

I got an answer here, it is not useful to make a bar multiple colors.

I have very little knowledge about eCharts. Can anybody give me any reference how can I implement it?

解决方案

You want to have different colors for each series in the stacked bar? Just draw imaginary vertical line across all series value and set color style for all crossing values.

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

这篇关于使用echart的条形(yAxis)的多种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！