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="chart"></div>
    </div>
  </div>
</template>

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

export default {
  name: "CustomerAnalyse",
  components: { CellHeaderVue },
  data() {
    return {};
  },
  mounted() {
    const echartInstance = echarts.init(document.getElementById("chart"));
    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],
        },
      ],
    };
    echartInstance.setOption(option);
  },
};
</script>

<style scoped>
#customerAnalyse .cell-content .chart-operate {
  margin-left: 20px;
  height: 20px;
}
#customerAnalyse .cell-content .chart-operate i {
  cursor: pointer;
}
#customerAnalyse .cell-content #chart {
  width: 98%;
  height: calc(100% - 25px);
  margin: 0 auto;
}
</style>