echarts柱图

样式如下

关键代码

// html部分
  <div class="echarts-container" :id="'echartDiv' + id">

  </div>

// js部分
data() {
  return {
    myChart: null,
    xAxisData: ['云南', '浙江', '山东', '广东', '四川', '河南', '广西', '河南', '广西'],
    yAxisData: [
      {
      value: '230',
      num: {
        red: 20,
        yellow: 60,
        color: 'red'
      }
    },{
      value: '350',
      num: {
        red: 20,
        yellow: 60,
        color: 'red'
      }
    },{
      value: '660',
      num: {
        red: 20,
        yellow: 60,
        color: 'yellow'
      }
    },{
      value: '1200',
      num: {
        red: 20,
        yellow: 60,
        color: 'red'
      }
    },{
      value: '900',
      num: {
        red: 20,
        yellow: 60,
        color: 'yellow'
      }
    },{
      value: '500',
      num: {
        red: 20,
        yellow: 60,
        color: 'yellow'
      }
    },{
      value: '650',
      num: {
        red: 20,
        yellow: 60,
        color: 'red'
      }
    }],
  }
},
methods: {
	initEchart() {
        let chartDom = document.getElementById("echartDiv"+this.id);
        this.myChart = this.$echarts.init(chartDom);
        const customSeriesLength = 1;
        const colors = ['#5178ff', '#d14a82', '#26c1f2', '#a166ff', '#9C2BB6'];
        const barWidth = 0.2; // 柱条占比
        const barGap = 0.2; // 不同系列的柱间距离

        function renderItem(params, api) {
          const ceilHeight = 5; // 装饰的高度
          const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
          const unitWidth = api.size([0, 1])[0];
          const height = api.size([0, api.value(1)])[1]; // 高度
          const width = unitWidth * barWidth; // 宽度
          const unitGapWidth = barGap * barWidth * unitWidth;
          const GapsWidth = (customSeriesLength - 1) * unitGapWidth;
          const showWidth = GapsWidth + width * customSeriesLength;
          const decorateIdx = parseInt(params.seriesName.split('_')[1]); // 绘制时的排序
          const xPosi =
            topCenter[0] - showWidth / 2 + decorateIdx * (width + unitGapWidth);
          return {
            type: 'rect', // 装饰
            shape: {
              x: xPosi,
              y: topCenter[1],
              width: width,
              height: height > ceilHeight ? ceilHeight : height,
            },
            style: api.style(),
          };
        }

        let series = [];
        for (let i = 0; i < customSeriesLength; i++) {
          const color = colors[i];
          series.push({
            name: 'basicRect_' + i,
            type: 'bar',
            barWidth: barWidth * 100 + '%',
            barGap: barGap * 100 + '%',
            data: this.yAxisData,
            itemStyle: {
              opacity: 0.5,
              color: color,
            },
          });
          series.push({
            name: 'decorateRect_' + i,
            type: 'custom',
            renderItem: renderItem,
            data: this.yAxisData,
            zlevel: 2,
            itemStyle: {
              color: color,
            },
          });
        }
        let option = {
          backgroundColor: 'transparent',
          grid: {
            top: 20,
            bottom: 20,
            left: '8%'
          },
          tooltip: {
            show: true,
            backgroundColor: 'transparent',
            padding: [10, 20, 10, 8],
            textStyle: {
              fontSize: 12,
              lineHeight: 24,
              color: '#000'
            },
            formatter: function(params, ticket, callback) {
              var htmlStr = '';
              var xName = params.name;
              htmlStr =  xName
              return `<div class="tip-div"><div class="title"><span class="paiColor ${params.data.num.color}"></span>${htmlStr}</div>
              <div class="num-div">红牌指标<span class="num" style="color: #FF6666;">${params.data.num.red}</span><span class="suffix">个</span></div>
              <div class="num-div">黄牌指标<span class="num" style="color: #FEB11C;">${params.data.num.yellow}</span><span class="suffix">个</span></div></div>
              `
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)'
              },
              symbol: ['none', 'arrow'],
              symbolSize: [6, 20],
              symbolOffset: [0, 10],
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: 'rgba(0,0,0,0.5)'
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: 'rgba(0,0,0,0.5)'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: series,
        };
        option && this.myChart.setOption(option);
      }
}