Echarts 基础柱状图，实现柱体设定颜色且带有图例

摘要：柱状图的最初要求很简单，4个柱体高低显示不同分类的值，逐渐增加的要求有：自定义特定分类颜色、增加图例展示、点击图例控制分类显示和隐藏。记录下遇到的问题和一些不熟悉的属性的使用。

        大致的显示结果如上图，下面逐步分解下实现步骤;

1. 自定义特定分类颜色

        这个最简单，在官网示例有。只需要在series中传入数据时date配置itemStyle.color即可。例如：

series: [
  {
    type: 'bar',
    data: [120,
      {
        value: 200,
        itemStyle: {
          color: '#a90000'
        }
      }, 150, 160
    ]
  }
]
// 默认的调色盘如下，可以参考设置，保持与其他图表颜色对应
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

2. 增加图例legend展示

        首先，需要配置legend属性，将展示的细节逐个配置清楚，但这时图例并没有展示。此时需要注意：图例需要根据数据系列的名称来显示，确保每个数据系列都有设置名称（name 属性）。当我们确保series中每个系列都有name后，图例可以正常显示出来，依然需要处理一些细节避免显示如下：

• 每个系列中显示多条数据，例如，"进行中"系列应该传入进行中的value，将其余使用null填充，其他系列类似；
• 上述格式处理series中的data后大概率号有个问题，就是每个系列中的柱状图不居中，这就需要使用数据堆叠属性stack，同个类目轴上系列配置相同的stack值可以堆叠放置；

注：目前 stack 只支持堆叠于 'value' 和 'log' 类型的类目轴上，不支持 'time' 和 'category' 类型的类目轴。此处Y轴为value类型。

        综上处置后，展示效果基本待到预期

**## legend属性配置**
legend: {
  show: true,
  orient: "horizontal",
  icon: "rect",
  itemWidth: 15,
  itemHeight: 15, //图例宽高
  textStyle: {
    color: "#A0B2D3",
    fontSize: 16,
  },
  data: [{
    name: '进行中: ' + this.inProgressCount,
    itemStyle: {
        color: '#91cc75'          // **由于柱状图设定的颜色和默认调色盘不一致，legend也要设置颜色保持与柱体一致**
      }
  },{
    name: '阻塞中: ' + this.blockedCount,
    itemStyle: {
      color: '#ee6666'
    }
  }, {
    name: '已完成: ' + this.completedCount,
    itemStyle: {
      color: '#5470c6'
    }
  }, {
    name: '未启动: ' + this.unstartedCount,
    itemStyle: {
      color: '#fac858'
    }
  }],
},
**## series的配置格式**
series: [
  {
    name: '进行中: ' + this.inProgressCount,
    type: 'bar',
    **stack: 'sta',  // 数据堆叠属性**
    barWidth: 25,
    data: [{
      value: this.inProgressCount,
      itemStyle: {
        color: '#91cc75'
      }
    }, null, null, null]
  },{
    name: '阻塞中: ' + this.blockedCount,
    type: 'bar',
    stack: 'sta',
    barWidth: 25,
    data: [null, {
      value: this.blockedCount,
      itemStyle: {
        color: '#ee6666'
      }
    }, null, null]
  }, {
    name: '已完成: ' + this.completedCount,
    type: 'bar',
    stack: 'sta',
    barWidth: 25,
    data: [null, null, {
      value: this.completedCount,
      itemStyle: {
        color: '#5470c6'
      }
    }, null]
  }, {
    name: '未启动: ' + this.unstartedCount,
    type: 'bar',
    stack: 'sta',
    barWidth: 25,
    data: [null, null, null, {
      value: this.unstartedCount,
      itemStyle: {
        color: '#fac858'
      }
    }]
  }
]

3. 点击图例控制分类显示和隐藏

        其实图例自身支持点击控制对应分类的显示隐藏，此处是要说明一个细节。由于页面处理不同屏幕兼容使用了zoom这导致图表鼠标点击和tooltip显示的偏移问题，解决方法其实不复杂，既然是由于全局缩放影响echarts容器，则还原缩放即可，例如：

// 使用chartsZoom解决:this.chartsZoom = 1 / baseZoom 
<div class="pieChart" :data-index=index :data-itemIndex=itemIndex :style="{width: '800px', height: '300px', zoom: chartsZoom}"></div>

        这样处理鼠标点击和tooltip 显示都正常了，不过通过电视机浏览器打开就会出现图表由于没有缩放，显示过大溢出页面的情况。此处，展示为主故未处理偏移问题。

可参考： https://www.cnblogs.com/w-rong/p/13962619.htmlhttps://www.cnblogs.com/w-rong/p/13962619.html

        完整代码如下：

initCharts () {
  console.log('init charts')
  const myChart = echarts.init(document.getElementById("chartStatistic"));
  console.log('init charts2')
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['进行中', '阻塞中', '已完成', '未启动'],
      axisLabel: {
        fontSize: 16,
        color: '#86A2C2'
      },
      splitLine: {
        show: true,
        lineStyle: {
          opacity: 0.5,
          width: 0.1 // 平行Y轴分割线
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          opacity: 1,
          width: 0.1
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          width: 0.1,
          color: '#FFFFFF',
          opacity: 0.5
        }
      },
      axisLabel: {
        fontSize: 16,
        color: '#86A2C2'
      },
      splitLine: { // 分隔线的配置
        show: true, // 是否显示分隔线
        lineStyle: {
          opacity: 0.5,
          width: 0.4 // 平行X轴分割线
        }
      },
    },
    legend: {
      show: true,
      orient: "horizontal",
      icon: "rect",
      itemWidth: 15,
      itemHeight: 15, //图例宽高
      textStyle: {
        color: "#A0B2D3",
        fontSize: 16,
      },
      data: [{
        name: '进行中: ' + this.inProgressCount,
        itemStyle: {
            color: '#91cc75'
          }
      },{
        name: '阻塞中: ' + this.blockedCount,
        itemStyle: {
          color: '#ee6666'
        }
      }, {
        name: '已完成: ' + this.completedCount,
        itemStyle: {
          color: '#5470c6'
        }
      }, {
        name: '未启动: ' + this.unstartedCount,
        itemStyle: {
          color: '#fac858'
        }
      }],
    },
    series: [
      {
        name: '进行中: ' + this.inProgressCount,
        type: 'bar',
        stack: 'sta',
        barWidth: 25,
        data: [{
          value: this.inProgressCount,
          itemStyle: {
            color: '#91cc75'
          }
        }, null, null, null]
      },{
        name: '阻塞中: ' + this.blockedCount,
        type: 'bar',
        stack: 'sta',
        barWidth: 25,
        data: [null, {
          value: this.blockedCount,
          itemStyle: {
            color: '#ee6666'
          }
        }, null, null]
      }, {
        name: '已完成: ' + this.completedCount,
        type: 'bar',
        stack: 'sta',
        barWidth: 25,
        data: [null, null, {
          value: this.completedCount,
          itemStyle: {
            color: '#5470c6'
          }
        }, null]
      }, {
        name: '未启动: ' + this.unstartedCount,
        type: 'bar',
        stack: 'sta',
        barWidth: 25,
        data: [null, null, null, {
          value: this.unstartedCount,
          itemStyle: {
            color: '#fac858'
          }
        }]
      }
    ]
  };
  console.log('init chartsn'+ JSON.stringify(option.series))
  option && myChart.setOption(option);
  window.addEventListener('resize',
    _.debounce(function() {
      myChart.resize()
    }, 200)
  )
},