<template>
  <div class="container">
    <Button type="primary" class="btn" @click="refresh">重置/刷新</Button>
    <div class="echartsClass" :style="{height:isShowTable ? '400px' : '750px'}">
      <div id="main" style="width: 100%;height:100%;"></div>
    </div>

    <div class="tableClass" v-if="isShowTable">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="job" label="工作" width="220" align="center"></el-table-column>
        <el-table-column prop="isMarried" label="婚否" align="center"></el-table-column>
        <el-table-column prop="time" label="通勤时间" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "index",
  data() {
    return {
      myCharts: "",
      xAxisData:  [
          "君越","君威","GL8","昂科威","汉DMI","宋DMI","海豹DMI","秦L","雅阁","思域","帕萨特","迈腾","速腾","亚洲龙","凯美瑞",
          "宝马5系","艾瑞泽8","风云a8","瑞虎","奥迪A4L","奥迪A6L",
      ],
      xAxisGroupData: [
        "","{offset|}别克","","","","{offset|}比亚迪","","","{offset|}本田","","","大众","","{offset|}丰田","",
        "宝马","","奇瑞","","{offset|}奥迪","",
      ], // 分组显示的标签（组内如果是偶数加上偏移{offset|}，如果是计数放正中间，写的时候先照抄上面的轴数据，相同的置空，位置不居中的的加上{offset|}(靠前的位置加)

      xAxisGroupData2: [
        "{offset|}一月","","{offset|}二月","","{offset|}三月","","{offset|}四月","{offset|}{offset|}五月","","六月","{offset|}七月","{offset|}{offset|}八月","","{offset|}九月","",
        "十月","","十一月","","{offset|}十二月","",
      ], // 分组显示的标签（组内如果是偶数加上偏移{offset|}，如果是计数放正中间，写的时候先照抄上面的轴数据，相同的置空，位置不居中的的加上{offset|}(靠前的位置加)
      seriesData:  [
          100, 120, 110, 130, 150, 90, 100, 120, 110, 130, 150, 90, 100, 120, 110, 130, 150, 90,
          100, 120, 110, 130, 150, 90, 100, 120, 110, 130, 150, 90, 100, 120, 110, 130],
      seriesData2:  [
          245, 550, 228, 336, 169, 320, 222, 398, 300, 233, 367, 170, 288, 173, 213, 321, 290, 279,
          168, 269, 369, 185, 159, 190, 433, 396, 274, 420, 257, 145, 200, 190, 189, 330],
      groupSeparates: [true, false, false, false, true, false, false, false, true, false, true, false, false, true,
        false, true, true, false, false, true, ], // 分组分隔线，长竖线是true,短竖线是false
      tableData: [
        {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄',job:'teacher',isMarried:"true",time:'1小时'},
        {date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄',job:'doctor',isMarried:'true',time:'1.5小时'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄',job:'salespeople',isMarried:'true',time:'1.5小时'},
        {date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄',job:'lawyer',isMarried:'false',time:'2小时'}
      ],
      isShowTable:false,
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.myCharts = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      let option = {
        title : { text : 'echarts自定义分组-静态' },
        grid:{  // 设置图表的边距，需要留白的大小
          left: "5%",
          top: "15%",
          right: "5%",
          bottom: "25%",
        },
        dataZoom: {type : 'inside'},
        // dataZoom: [ // 有的版本需要单独给每个x轴设置缩放，不然第二个轴不会跟着缩放，看echarts版本吧
        //     {type : 'inside',xAxisIndex: 0},
        //     {type : 'inside',xAxisIndex: 1},
        //     {type : 'inside',xAxisIndex: 2},
        // ],
        // dataZoom: [ // 这是默认展示的缩放大小，可以解决数据过多时柱状图挤在一起的状况
        //     {type: 'inside',xAxisIndex: [0,1,2], start: 0, end: 35},
        // ],
        tooltip : {},
        legend:{},
        xAxis : [
          {
            xAxisIndex: 0,
            position : "bottom",
            data : this.xAxisData,
            axisTick : {
              length : 20 // 刻度线的长度
            },
            axisLabel : {
              margin : 20 // 标签到轴线的距离
            }
          },
          {
            xAxisIndex: 1,
            position : "bottom",
            data : this.xAxisGroupData,
            axisTick : {
              length : 60,
              interval : (index, value)=> { // // 这里如果是普通的function定义的话，注意this的问题，需要that = this 或者箭头函数
                return this.groupSeparates[index]; // 根据标识分组的刻度线
              }
            },
            axisLabel : {
              margin : 50,
              interval : 0, // 显示所有标签
            }
          },
          {
            xAxisIndex: 2,
            position : "bottom",
            data : this.xAxisGroupData2,
            axisTick : {
              length : 30,
              interval : (index, value)=> { // // 这里如果是普通的function定义的话，注意this的问题，需要that = this 或者箭头函数
                return this.groupSeparates[index]; // 根据标识分组的刻度线
              }
            },
            axisLabel : {
              margin : 75,
              interval : 0, // 显示所有标签
            }
          },
        ],
        yAxis : {},
        series : [
          {
            type : 'bar',
            name:'国内汽车销量',
            data : this.seriesData
          },
          {
            type : 'bar',
            name:'全球汽车销量',
            data : this.seriesData2
          },
        ]
      };
      console.log(this.myCharts);

      this.myCharts.lastBandWidth = 0;
      // 监听渲染事件，只要bandWidth发生变化，重新设置标签偏移的值
      this.myCharts.on('rendered', this.renderedHandel);

      this.myCharts.on('click', this.clickHandle);

      // 绘制
      this.myCharts.setOption(option);
    },

    // 鼠标缩放后，重新设置标签偏移的值
    renderedHandel() {
      // ()=> {   // 这里如果是普通的function定义的话，注意this的问题，需要that = this 或者箭头函数
        this.$nextTick(()=>{
          let bandWidth = this.myCharts._chartsViews[0].renderTask.context.outputData._layout.bandWidth;
          if (this.myCharts.lastBandWidth != bandWidth) {
            this.myCharts.lastBandWidth = bandWidth;
            // 延时执行否则echarts渲染异常
            setTimeout(()=>{
              // 加上偏移后重新绘制
              let optionNew = {xAxis: [{},{},{}]};    // 有几个X轴就有几个{}
              // 增量更新偏移值，有几个X轴就有几个optionNew.xAxis[n]
              optionNew.xAxis[1] = {axisLabel:{rich:{offset:{width: this.myCharts.lastBandWidth}}}};
              optionNew.xAxis[2] = {axisLabel:{rich:{offset:{width: this.myCharts.lastBandWidth}}}};
              //console.info(optionNew);
              this.myCharts.setOption(optionNew);
            }, 0);
          }
        });
      // }
    },

    // 鼠标点击柱状图
    clickHandle(params) {
      console.log(params);
      this.isShowTable = true;
      this.$nextTick(()=>{    // 在执行这个钩子之前，vue会先看下(检测)页面有咩有改动，如果页面改动了就等页面重新渲染完成后，再执行这个钩子中的代码 确保echarts已经渲染完毕
        this.myCharts.resize();
      });
      this.$notify({
        // title: this.$createElement('span',{style:{color:'#67C23A'}},`获取${params.name}数据成功`),
        title: `获取${params.name}数据成功`,
        dangerouslyUseHTMLString: true, // 确保启用这个选项以允许HTML
        message: `<div>国内销量:xxx台</div> <div>全球销量：xxx台</div>`,
      });
    },
    // 刷新
    refresh() {
      this.isShowTable = false;
      this.$nextTick(()=>{    // 在执行这个钩子之前，vue会先看下(检测)页面有咩有改动，如果页面改动了就等页面重新渲染完成后，再执行这个钩子中的代码 确保echarts已经渲染完毕
        this.myCharts.resize();
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.btn {
  width: 120px;
}
.echartsClass {
  width: 100%;
  height: 400px;
  margin-top: 30px;
}
.tableClass {
  margin-top: 50px;
}
</style>

GIF 2024-9-25 21-41-42.gif

参考博客：
https://blog.csdn.net/chch87/article/details/123877652
https://blog.csdn.net/smallNut/article/details/122194634