echarts 柱状图带 表格展示

 

  <div v-loading="loading" element-loading-text="数据量较多, 拼命加载中..." element-loading-spinner="el-icon-loading">
      <ve-histogram ref="histogramRef1" v-bind="{ ...histogramOpt }" width="100%" height="600px"> </ve-histogram>
    </div>

computed: {

    histogramOpt() {
      return {
        grid: {
          left: 15,
          right: 15,
          bottom: 100,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: { shadowColor: '#f7f7f7', opacity: 0.3 },
          },

          formatter: (params) => {
            let res = ''
            if (params[0].axisValue === '月份') return null
            res = `${params[0].axisValue}<br/>`
            params.forEach((item) => {
              if (item.axisValue === '月份') return null
              else {
                res += `${item.marker} ${item.seriesName} : ${item.value} ` + '<br>'
              }
            })
            return res
          },
        },
        legend: {
          type: 'scroll',
          bottom: 0,
          itemWidth: 20,
          itemGap: 50,
          data: ['添加后七日内换机数', '添加后十四日内换机数', '沟通后七日内换机数', '沟通后十四日内换机数'],
        },
        dataEmpty: this.noData,
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: true,
              length: 50,
              lineStyle: {
                color: '#fff',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              margin: 15,
              show: true,
              interval: 0,
            },

            data: ['月份', ...this.monthNums],
          },
          {
            position: 'bottom',
            offset: 40,
            axisPointer: {
              type: 'none',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999',
              },
            },
            axisTick: {
              show: true,
              length: -35,
              inside: true,
            },
            // max: 12,
            data: [''],
          },
          {
            position: 'bottom',
            offset: 75,
            axisPointer: {
              type: 'none',
            },
            axisTick: {
              show: true,
              length: 35,
              inside: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              fontWeight: 'bold',
              inside: true,
              textStyle: {
                fontSize: '16',
              },
              interval: 0,
            },
            data: ['总换机数', ...this.changeCnt],
          },
        ],
        yAxis: {
          type: 'value',
          axisTick: {
            lineStyle: {
              color: '#eee',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#eee'],
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            formatter: function (params) {
              return params.toString()
            },
          },
        },
        series: [
          {
            name: '添加后七日内换机数',
            type: 'bar',
            data: ['', ...this.addChng7dCnt],
            itemStyle: {
              color: '#ed7d31',
            },
            label: {
              show: this.showLabel,
              position: 'top',
            },
          },
          {
            name: '添加后十四日内换机数',
            type: 'bar',
            data: ['', ...this.addChng14dCnt],
            barGap: '10%',
            itemStyle: {
              color: '#ffc000',
            },
            label: {
              show: this.showLabel,
              position: 'top',
              offset: [0, -15],
            },
          },
          {
            name: '沟通后七日内换机数',
            type: 'bar',
            data: ['', ...this.commChng7dCnt],
            barGap: '10%',
            itemStyle: {
              color: '#70ad47',
            },
            label: {
              show: this.showLabel,
              position: 'top',
            },
          },
          {
            name: '沟通后十四日内换机数',
            type: 'bar',
            data: ['', ...this.commChng14dCnt],
            barGap: '10%',
            itemStyle: {
              color: '#ad4f0f',
            },
            label: {
              show: this.showLabel,
              position: 'top',
              offset: [0, -15],
            },
          },
        ],
      }
    },
}