CustomerAnalyse.vue

<template>
  <CellWrapper title="大客户分析">
    <template v-slot:header>
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </template>

    <div class="chart-container">
      <div class="chart-operate">
        <i class="el-icon-arrow-up"></i>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="chartWrapper">
        <div class="chart"></div>
      </div>
    </div>
  </CellWrapper>
</template>

<script>
import CellWrapper from "../common/CellWrapper.vue";
import * as echarts from "echarts";
import { busvolume, finamount, expincome } from "~/service/report";

export default {
  name: "CustomerAnalyse",
  components: { CellWrapper },
  data() {
    return {
      echartInstance: null,
      //componentIndex
      mapping: {
        0: "busvol",
        1: "iaefts",
        2: "expben",
      },
      category: [],
      seriesData : [] ,
      seriesData1 : [] ,
      seriesData2 : [] ,
    };
  },
  mounted() {
    // 仅在整个视图都被渲染之后才会运行的代码
    this.$nextTick(async() => {
      await this.loadData();
      this.loadCharts();
      this.loadChartsBind = this.loadCharts.bind(this);
      window.addEventListener("resize", this.loadChartsBind);
    });
  },
  methods: {
    async loadData() {
      //统计 业务量
      const volume = await busvolume();
      let volumes = Array.from(volume);
      //统计 融资量
      const amount = await finamount();
      let amounts =  Array.from(amount);
      //统计 费用收益
      const income = await expincome();
      let incomes = Array.from(income)

      let categoryArr = [];
            //定义 seriesData数组 金额  category数组 客户名
      // let seriesData = [];
      // let seriesData1 = [];
      // let seriesData2 = [];
      
      // 优先遍历客户名，方便后续的数组匹配
      // volume.forEach((v) => {
      //   console.log(v.nam1)

      //   category.push(v.nam1);
      //   console.log(category.toString());
      //   console.log(category)
      // });
      
      for (let i = 0; i < volume.length; i++) {
        let v = volume[i].nam1;
        // console.log(typeof v);
        // console.log(volume[i].nam1);
        categoryArr.push(v);

        // console.log(category.toString());
        // console.log(category);
        // console.log(typeof category);
      }
      this.category = categoryArr;
      //存在bug后续要解决

      // amount.forEach((v) => {
      //   for (let i = 0; i < category.length; i++) {
      //     if (category[i] == v.nam1) {
      //       continue;
      //     } else {
      //       category.push(v.nam1);
      //     }
      //   }
      // });

       //存在bug后续要解决
      // income.forEach((v) => {
      //   for (let i = 0; i < category.length; i++) {
      //     if (category[i] == v.nam1) {
      //       continue;
      //     } else {
      //       category.push(v.nam1);
      //     }
      //   }
      // });
      const volumeArr = []
      volumes.forEach((v) => {
        for (let i = 0; i < categoryArr.length; i++) {
          if (categoryArr[i] == v.nam1) {
            volumeArr.push(v.amount)
            break;
          }
        }
      });
      this.seriesData = volumeArr;
      const amountArr = []
      amounts.forEach((v) => {
        for (let i = 0; i < categoryArr.length; i++) {
          if (categoryArr[i] == v.nam1) {
           amountArr.push(v.amount);
            break;
          }
        }
      });
      this.seriesData1 = amountArr;
      const incomeArr = []
      incomes.forEach((v) => {
        for (let i = 0; i < categoryArr.length; i++) {
          if (categoryArr[i] == v.nam1) {
            incomeArr.push(v.amount);
            break;
          }
        }
      });
      this.seriesData2 = incomeArr;
    },
    //加载图标函数
    loadCharts() {
      if (this.echartInstance) {
        this.echartInstance.dispose();
      }
      this.echartInstance = echarts.init(
        this.$el.querySelector(".chart-container .chartWrapper .chart")
      );

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          bottom: "2%",
        },
        grid: {
          left: "1%",
          right: "6%",
          top: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: ["10%", "20%"],
        },
        yAxis: {
          type: "category",
          data: this.category,
        },
        series: [
          {
            name: "业务量金额（美元）",
            type: "bar",
            data: this.seriesData,
          },
          {
            name: "融资量金额（万美元）",
            type: "bar",
            data: this.seriesData1,
          },
          {
            name: "费用收益金额（千美元）",
            type: "bar",
            data: this.seriesData2,
          },
        ],
      };

      this.echartInstance.setOption(option);

      //echart on事件来跳转页面
      // this.echartInstance.on(
      //   'click',
      //   function (params) =>{
      //     alert(params.name);
      //     this.$router.push('/taskList')
      // }

      this.echartInstance.on("click", (params) => {
        console.log(params);
        console.log(params.name);

        var name = parseInt(params.name);
        let path = params.componentIndex;

        //  要使用=>函数使内外的this指向一致
        if (path === 0) {
          this.$router.push({
            path:"/business/Busvol",
            query:{name: params.name}

          });
        } else if (path === 1) {
          //{path:"/xxxpath",query:"id:xxx"} router跳转页面传参业务 接受页面用created(){if(this.$route.query){todo}}
          this.$router.push({
            path:"/business/Iaefts",
            query:{name: params.name}
            });

        } else {
          //{path:"/xxxpath",query:"id:xxx"} router跳转页面传参业务 接受页面用created(){if(this.$route.query){todo}}
          this.$router.push({
           path:"/business/Expben",
           query:{name:params.name}
        });

        }
      });
    },

    destroyed() {
      window.removeEventListener("resize", this.loadChartsBind);
    },
  },
};
</script>

<style>
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}
.chart-operate {
  margin-left: 20px;
  height: 20px;
}
.chart-operate i {
  cursor: pointer;
}
.chartWrapper {
  flex: 1;
}
.chartWrapper .chart {
  width: 100%;
  height: 100%;
  /* 将指针改变为可以跳转 */
  cursor: pointer;
}
</style>