Echarts pie chart and histogram linkage

I did it at the beginning, and I remembered it so that I can see it later.

Effect display

1. default display
   

2. Click on the pie chart on the left [Electrical Failure] to display
   

3. Click on the pie chart on the left [Machine Repair Fault] to display
   

Sample code:

<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item class="el-form-item--medium">
        <label class="el-form-item__label">Failure Time</label>
        <div class="el-form-item__content"></div>
      </el-form-item>
      <el-form-item class="el-form-item--medium">
        <div class="el-form-item__content">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="to"
            start-placeholder="Start date"
            end-placeholder="End date"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item class="el-form-item--medium">
        <div class="el-form-item__content">
          <el-button type="primary" size="mini" @click="search">
            <i class="el-icon-search"></i>
            <span>Query</span>
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-row :gutter="5" class="mb20">
      <el-col :span="24">
        <el-row :gutter="5">
          <el-col :span="12" class="evs-top" style="width: 50%">
            <span>Failure Type Statistics</span>
            <el-card style="height: 360px" class="evs-overflow">
              <div ref="pieChart" style="height: 320px"></div>
            </el-card>
          </el-col>
          <el-col :span="12" class="evs-top" style="width: 50%">
            <span>Equipment failure statistics</span>
            <el-card style="height: 360px" class="evs-overflow">
              <div ref="histogramChart" style="height: 320px"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";

export default {<!-- -->
  name: "MyChart",
  data() {<!-- -->
    return {<!-- -->
      chartBar: null, // histogram
      chartPie: null, // pie chart
      value1: "",
      textDate: {<!-- -->
        chartPie: [
          {<!-- -->
            legend: {<!-- -->
              top: "bottom",
              data: [
                {<!-- --> value: 3, name: "Electrical Failure" },
                {<!-- --> value: 19, name: "Mechanical failure" },
              ],
            },
            data: [
              {<!-- --> value: 3, name: "Electrical Failure" },
              {<!-- --> value: 19, name: "Mechanical failure" },
            ],
          },
        ],
        chartBar: [
          {<!-- -->
            xAxis: {<!-- -->
              type: "category",
              data: ["Electrical failure", "Machine repair failure"],
            },
            data: [
              {<!-- --> value: 3, type: "bar" },
              {<!-- --> value: 19, type: "bar" },
            ],
          },
          {<!-- -->
            xAxis: {<!-- -->
              type: "category",
              data: ["furnace top crane crane 40t/10t","FJ101 belt conveyor","hydraulic transmission sector gate"],
              axisLabel: {<!-- -->interval: 0}
            },
            data: [
              {<!-- --> value: 1, type: "bar" },
              {<!-- --> value: 1, type: "bar" },
              {<!-- --> value: 1, type: "bar" },
            ],
          },
          {<!-- -->
            xAxis: {<!-- -->
              type: "category",
              data: ["Hydraulic sector gate", "Volume feeder (broken coke bin)", "Furnace top hydraulic station"],
              axisLabel: {<!-- -->interval: 0},
            },
            data: [
              {<!-- --> value: 2, type: "bar" },
              {<!-- --> value: 6, type: "bar" },
              {<!-- --> value: 11, type: "bar" },
            ],
          },
        ],
      },
    };
  },
  created() {<!-- -->},
  watch: {<!-- -->},
  mounted() {<!-- -->
    console.log(this.textDate, 123);
    // initialize the chart
    this.initPieChart();
    this.initHistogramChart(this.textDate.chartBar[0]);
  },
  activated() {<!-- -->
    // if (this.chartBar) {<!-- -->
    // this.chartBar.resize();
    // }
    // if (this.chartPie) {<!-- -->
    // this.chartPie.resize();
    // }
  },
  methods: {<!-- -->
    search() {<!-- -->},
    click() {<!-- -->},
    // pie chart
    initPieChart() {<!-- -->
      const pieChart = echarts.init(this.$refs.pieChart);
      // Set the configuration items and data of the chart
      const pieOptions = {<!-- -->
        // Set the configuration items of the chart
        series: [
          {<!-- -->
            type: "pie",
            data: [
              {<!-- -->
                value: 3,
                name: "Electrical Failure",
              },
              {<!-- -->
                value: 19,
                name: "Mechanical Repair Failure",
              },
            ],
          },
        ],
        radius: ["50%"],
      };
      pieChart. setOption(pieOptions);
      // event processing linkage histogram
      pieChart.on("click", (params) => {<!-- -->
        console.log(params, 123);
        switch (params.name) {<!-- -->
          case "Electrical failure":
            this.initHistogramChart(this.textDate.chartBar[1]);
            break;
          case "Machine Repair Failure":
            this.initHistogramChart(this.textDate.chartBar[2]);
            break;
          default:
            break;
        }
      });
      // window. addEventListener("resize", () => {<!-- -->
      // this.pieChart.resize();
      // });
    },
    // histogram
    initHistogramChart(params) {<!-- -->
      const histogramChart = echarts.init(this.$refs.histogramChart);
      const historgramOption = {<!-- -->
        tooltip: {<!-- -->
          trigger: "item",
        },

        xAxis: params.xAxis,
        yAxis: {<!-- -->},
        series: [{<!-- --> data: params.data, type: "bar" }],
      };
      histogramChart. setOption(histogramOption);
      // window. addEventListener("resize", () => {<!-- -->
      // this.chartBar.resize();
      // });
    },
  },
};
</script>