Echarts饼状图与柱状图联动

吾之初為，記之以便後日視資。

效果展示

1. 默认展示
   

2. 点击左侧饼状图展示对应分类下数据以A为例
   

示例代码：

<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item class="el-form-item--medium">
        <label class="el-form-item__label">故障时间</label>
      </el-form-item>
      <el-form-item class="el-form-item--medium">
        <div class="el-form-item__content">
          <el-date-picker
            v-model="faultDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            clearable
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </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="queryClick">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </el-button>
        </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="routePush">
            <i class="el-icon-search"></i>
            <span>跳转Echarts实时监控页面</span>
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" class="mb20">
      <el-col :span="12">
        <span>故障类型统计</span>
        <el-card style="height: 350px" id="pieChart"></el-card>
      </el-col>
      <el-col :span="12">
        <span>设备故障次数统计</span>
        <el-card style="height: 350px" id="histogramChart"></el-card>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="eamOrderMaintList">
      <el-table-column
        label="设备编码"
        prop="eCode"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column label="设备名称" prop="ename" align="center" />
      <el-table-column label="设备位置" prop="positionName" align="center" />
      <el-table-column label="故障名称" align="faultName" prop="topic" />
      <el-table-column label="故障类型" prop="gzClass" align="center" />
      <el-table-column label="故障来源" prop="ori" align="center" />
      <el-table-column label="停机起始时间" prop="tjStart" align="center" />
      <el-table-column label="停机结束时间" prop="tjEnd" align="center" />
      <el-table-column label="故障原因" prop="sjGzReason" align="center" />
      <el-table-column label="操作" align="center" prop="caTableName">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >故障影响分析
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getEamOrderMaintList"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import faultApi from "@/api/bdia/device/sint/fault/index";
import { copy } from "@/utils/elvis";

export default {
  name: "MyChart",
  data() {
    return {
      total: 0,
      loading: true,
      gzClassList: [],
      // 分页list
      eamOrderMaintList: [],
      // 故障类型
      failureTypeList: [],
      faultDate: [
        // new Date(new Date().getTime() - 3600 * 1000 * 24 * 30).format(
        //   "yyyy-MM-dd HH:mm:ss"
        // ),
        // new Date().format("yyyy-MM-dd HH:mm:ss"),
      ],
      // 分页查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gzClass: "",
        startDate: "",
        endDate: "",
      },
      chartBar: null, // 柱状图
      chartPie: null, // 饼图
      // 设备故障展示数据Vo对象
      equipmentFailurShowVo: [],
      gzClass: "",
    };
  },
  created() {
    this.getEamOrderMaintList();
    // this.getDicts("failure_type").then((response) => {
    //   this.failureTypeList = response.data;
    // });
    this.getGzClass();
  },
  watch: {},
  mounted() {
    // setTimeout(() => {
    //控制图表的绘制时间
    // this.initPieChart();
    this.initHistogramChart(this.chartBar);
    // }, 400);
  },
  methods: {
    // changeValue(val) {
    //   if (val) {
    //     this.queryParams.startDate = val[0];
    //     this.queryParams.endDate = val[1];
    //   } else {
    //     this.queryParams.startDate = "";
    //     this.queryParams.endDate = "";
    //   }
    // },
    // 查询故障类型
    queryClick() {
      this.getEamOrderMaintList();
      this.initHistogramChart();
      this.getGzClass();
    },
    getGzClass() {
      this.queryParams.startDate = this.faultDate ? this.faultDate[0] : "";
      this.queryParams.endDate = this.faultDate ? this.faultDate[1] : "";
      let param = copy(this.queryParams);
      faultApi.getGzClass(param).then((response) => {
        this.gzClassList = response.data;
        this.initPieChart();
      });
    },
    handleClick() {
      this.$router.push("/device/sint/fault/warnDetail");
    },
    routePush(){
      this.$router.push("/device/sint/fault/test")
    },
    // 分页方法
    getEamOrderMaintList() {
      this.queryParams.startDate = this.faultDate ? this.faultDate[0] : "";
      this.queryParams.endDate = this.faultDate ? this.faultDate[1] : "";
      let param = copy(this.queryParams);
      faultApi.getEamOrderMaintList(param).then((response) => {
        this.eamOrderMaintList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 饼状图
    initPieChart() {
      const pieChart = echarts.init(document.getElementById("pieChart"));
      let data = [];
      this.gzClassList.forEach((element, index) => {
        data.push({
          value: element.gzNumber,
          name: element.gzClass + " " + element.gzNumber + "次",
          code: element.gzClass,
        });
      });
      // 设置图表的配置项和数据
      const pieOptions = {
        // 设置图表的配置项
        series: [
          {
            type: "pie",
            data: data,
          },
        ],
        radius: ["50%"],
      };
      pieChart.setOption(pieOptions);
      pieChart.off('click')
      // 事件处理 联动柱状图
      pieChart.on("click", (params) => {
        var gzClass = params.data.name.split(" ")[0];
        this.queryParams.gzClass = gzClass;
        this.getEamOrderMaintList();
        this.initHistogramChart(params.data.code);
      });
    },
    // 柱状图
    initHistogramChart(params) {
      let xAxisData = [];
      let data = [];
      this.queryParams.startDate = this.faultDate ? this.faultDate[0] : "";
      this.queryParams.endDate = this.faultDate ? this.faultDate[1] : "";
      this.queryParams.gzClass = params;
      faultApi.getEquipmentFailureCountByGzClass(this.queryParams).then((response) => {
          this.equipmentFailurShowVo = response.data;
          this.equipmentFailurShowVo.forEach((element, index) => {
            // 设置柱状图列
            xAxisData.push(element.ename);
            // 展示数
            data.push(element.failureNumber);

            let option = {
              xAxis: {
                type: "category",
                data: xAxisData,
              },
              data: data,
              axisLabel: {
                interval: 0,
                formatter: function (params) {
                  var newParamsName = "";
                  const paramsNameNumber = params.length;
                  const provideNumber = 3; // 单行显示文字个数
                  const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (let p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p === rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                },
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: data,
                  type: "bar",
                },
              ],
              tooltip: {
                trigger: "item",
              },
            };
            const histogramChart = echarts.init(
              document.getElementById("histogramChart")
            );
            histogramChart.setOption(option);
          });
        });
    },
  },
};
</script>