Vue2+echarts横向进度条类型颜色渐变柱形图

最近遇到个需求，用图表横向显示数据并且文字要在两边柱形上面，而且柱形要颜色渐变也就是下图所示:

分析一下这个图表的需求，大概为几点:

1.横向柱形图。其实这点不难，x与y轴数据互换一下就可以了。

2.背景有个黑色的总进度条。

3.柱形图两边文字在柱子上方。

4.柱子颜色渐变。

分析完需求，代码如下，每一行都做了注释

drawPowerCharts() {
  let myChart10 = this.$echarts.init(document.getElementById("myCharts"));

  myChart.setOption({
    // 设置图表的选项

    grid: {
      x: 20, // 距离容器左边的距离
      y: 40, // 距离容器上边的距离
      x2: 30, // 距离容器右边的距离
      y2: 20, // 距离容器下边的距离
    },
    // 设置图表的网格样式，即图表距禒容器四边的距禒

    xAxis: {
      type: "value", // x 轴类型为数值型
      show: false, // 不显示 x 轴
    },
    // 设置图表的 x 轴的类型为数值型，并且不显示 x 轴

    tooltip: {
      trigger: "axis", // 触发类型为坐标轴触发
      axisPointer: {
        type: "shadow", // 指示器类型为阴影
      },
    },