CustomerAnalyse.vue

<template>
  <div class="home-cell" id="customerAnalyse">
    <CellHeaderVue title="大客户分析">
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </CellHeaderVue>
    <div class="cell-content">
      <div class="chart-operate">
        <i class="el-icon-arrow-up"></i>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div id="chartWrapper">
        <div id="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import CellHeaderVue from "./CellHeader.vue";
import * as echarts from "echarts";

export default {
  name: "CustomerAnalyse",
  components: { CellHeaderVue },
  data() {
    return {
      echartInstance: null,
    };
  },
  mounted() {
    this.echartInstance = echarts.init(document.getElementById("chart"));
    this.loadCharts()
    this.loadChartsBind = this.loadCharts.bind(this)
    window.addEventListener('resize', this.loadChartsBind)
  },
  methods: {
    loadCharts() {
      this.echartInstance.clear()
      const option = {
        title: {
          // text: "Test Demo",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          bottom: "2%",
        },
        grid: {
          left: "1%",
          right: "6%",
          top: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "海康威视",
            "春晖指控",
            "苏奥传感",
            "东方财富",
            "隆基股份",
            "贵州茅台",
          ],
        },
        series: [
          {
            name: "业务量（万美元）",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 230230],
          },
          {
            name: "融资量（万美元）",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 381807],
          },
          {
            name: "费用收益（千美元）",
            type: "bar",
            data: [49325, 53438, 11000, 221594, 43241, 455807],
          },
        ],
      };
      this.echartInstance.setOption(option);
    },
  },
  destroyed() {
    window.removeEventListener('resize', this.loadChartsBind)
  }
};
</script>

<style scoped>
#customerAnalyse .cell-content {
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}
#customerAnalyse .cell-content .chart-operate {
  margin-left: 20px;
  height: 20px;
}
#customerAnalyse .cell-content .chart-operate i {
  cursor: pointer;
}
#customerAnalyse .cell-content #chartWrapper {
  /* width: 98%; */
  /* height: calc(100% - 50px); */
  /* height: 200px; */
  /* margin: 0 auto; */
  flex: 1;
}
#customerAnalyse .cell-content #chartWrapper #chart {
  width: 100%;
  height: 100%;
}
</style>