柱状图背景

<template>
  <div class="echart01" ref="echart-dom">
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: {
    status: {
      type: String
    },
    data: {
      type: Object
    }
  },
  data(){
    return {
      legendData: [],
      myChart: null,
      series: [],

      option: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
              // 定义一个空字符串来收集要显示的内容
              var result = '';
              // 遍历数据点并构建自定义的 tooltip 文本
              params.forEach(function (item) {
                  result += item.seriesName + ': ' + item.data + '<br/>';
              });
              // 返回构建的字符串，不包含编号
              return result;
          }
        },
        legend: {

          data: this.legendData,
          left: 50,
          itemGap: 30,
          itemWidth: 30,
          itemHeight: 14,
          borderRadius: 0,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            splitLine: {
                lineStyle: {
                  color: "#f1f4f9",
                  type: "dashed",
                },
            },
            axisTick: {
              show: false,
            },
            axisLine: {

              lineStyle: {
                color: '#c1c1c2'
              }
            },
            axisLabel: {
              show: true,
              borderType: 'dashed',
              textStyle: {
                color: "#333",
              },
              interval: 0,
              rotate: 30
            },
          },
          {
            type: 'category',
            splitLine: {

                lineStyle: {
                  color: "#f1f4f9",
                  type: "dashed",
                },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#c1c1c2'
              }
            },
            axisLabel: {
              show: false,
            },
          }
        ],
        yAxis: {
          type: 'value',
          data: [],
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle:{
              type: 'dashed',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#c1c1c2",
            },
          }

        },
        series: [],
      },
      maxValue: [],
      colors: [
        ['#F7636E','#ec808d1a'],
        ['#FFB278', '#FFDECA'],
        ['#8A9FC4', '#dee5e7d9'],
        ['#45A9F0', '#0081ff1a'],
        ['#3866D4', '#0081ff1a']
      ]
    }
  },
  watch: {
    status: {
      immediate: true,
      handler: function(val) {
        let data = {}
        if(val == '1') {
          data = {
            xdata: this.data.count.xdata,
            ydata: this.data.count.ydata
          }
        }else {
          data = {
            xdata: this.data.amount.xdata,
            ydata: this.data.amount.ydata
          }
        }
        this.series = []
        this.legendData = data.xdata.map(item=> item.name)
        data.xdata.forEach((item, index) => {
          if(index > this.colors.length) {
            index = this.colors.length % index
          }
          let tcolor = this.colors[index]
          let seriesItem =  {
            xAxisIndex: 1,
            name: item.name,
            type: 'bar',
            stack: 'total',
            barWidth: 10, //柱子宽度
            data: item.value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                      offset: 0,
                      color: tcolor[0],
                  },
                  {
                      offset: 1,
                      color: tcolor[1],
                  },
              ]),
            },
          }
          this.series.push(seriesItem)
        });
        let tarr = data.xdata.map(item=> item.value.reduce((pre,next)=> +pre+ +next))
        let max = Math.max.apply(null,tarr)
        if(val == 1) {
          max = max + (50 - max % 50)
        }else {
          max = max + (500 - max % 500)
        }
        this.maxValue = new Array(6).fill(max)
        this.series.push({
            z: -1,
            xAxisIndex: 0,
            type: 'bar',
            barWidth: 80,
            // barGap: '-450%',
            data: this.maxValue,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                      offset: 0,
                      color: '#FBFCFD',
                  },
                  {
                      offset: 1,
                      color: '#F6F8FA',
                  },
              ]),
            },
            emphasis: {
              disabled: true
            },
            tooltip: {
              show: false  // 禁用 pictorialBar 系列的 tooltip
            },
        })
        this.option.series = this.series
        this.option.legend.data =  data.xdata.map(item => item.name)
        this.option.xAxis[0].data  =  data.ydata
        this.option.yAxis.name = '单位：' + (this.status == '2'?"万元": "个")
        if(this.myChart) {
          this.myChart.setOption(this.option, {notMerge: true});
          this.$forceUpdate()
        }else {
          this.$nextTick(()=> {
            this.init()
          })
        }

      },
    }
  },
  methods: {
    init() {
      if(this.myChart) {
        return false
      }
      let chartDom = this.$refs['echart-dom']
      this.myChart = echarts.init(chartDom);

      this.option && this.myChart.setOption(this.option);

    }
  }
}
</script>
<style scoped lang="scss">
.echart01 {
  height: 100%;
  width: 100%;
}
</style>