Vue使用Echarts避免踩坑

悄悄努力惊艳所有人

已于 2022-09-09 15:19:04 修改

阅读量208

点赞数

文章标签： echarts javascript ecmascript

于 2022-09-09 15:18:09 首次发布

本文链接：https://blog.csdn.net/wangzheguilai1/article/details/126783586

版权

将Axios请求到的数据直接设置到data中的图表会报错，要么放到axios的响应中，要么在axios响应中调用生成echarts图

methods: {
  // 交易总笔数
  getdashboardData() {
    dashboardData().then((result) => {
      if (result.code == 0) {
        this.totalLoanAmount = result.data.totalLoanAmount;
        this.totalRepayAmount = result.data.totalRepayAmount;
        this.totalAmountReceived = result.data.totalAmountReceived;

        for (var i = 0; i < result.data.countryData.length; i++) {
          result.data.countryData[i].value =
            result.data.countryData[i].loanAmount;
          result.data.countryData[i].name = result.data.countryData[i].code;
          delete result.data.countryData[i].loanAmount;
          delete result.data.countryData[i].code;
          this.xdata[i] = result.data.countryData[i].name;
          this.ydata[i] = result.data.countryData[i].value;
        }
        this.countryLoanData.series[0].data = result.data.countryData;

        this.chart = Chart.init(this.$refs.loanEcharts);
        this.chart.setOption(this.countryLoanData);
        this.getSUM();
      }
    });
  },
  // 各个国家贷款统计柱形图
  getSUM() {
    let lwndArr = [];
    let lwtsArr = [];
    lwndArr = this.xdata
    lwtsArr = this.ydata
    const countryLoanDataColumn = {
      gird:{
          left:'10%',
          right:'4%',
          bottom:'3%',
          containLabel:true
      },
      legend:{
        title:"各国家贷款总金额"
      },
      xAxis: {
        name:"国家",
        type: "category",
        data: lwndArr,
      },
      yAxis: {
        type: "value",
        name:"贷款金额"
      },
      series: [
        {
          data: lwtsArr,
          type: "bar",
          label:{
            show:true,
            position:'top'
          }
        },
      ],
    };
    console.log("@",countryLoanDataColumn)
    Chart.init(this.$refs.loanEcharts2).setOption(countryLoanDataColumn,true);
  },