vue 中echarts 后端数据的处理

var myChart = echarts.init(document.getElementById('home-echarts'));
  var date = new Date();
  //date.setFullYear(2021)
  var year = date.getFullYear();
  myChart.setOption({
    title: {
      text: year+'年史志事业部签约金额示意图。'
    },
    tooltip: {},
    legend: {
      data:['签约金额','回款金额'],
      right:150
    },
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [{
      name: '签约金额',
      type: 'bar',
      data: []
    },
      {
        name:'回款金额',
        type:'bar',
        data:[]
      }],
    itemStyle: {
      normal: {
        label: {
          show: true,   //开启显示
          position: 'top', //在上方显示
          textStyle: {     //数值样式
            color: 'black',
            fontSize: 16
          }
        }
      }
    }
  });
  var name=[];
  var money=[];
  var huikuan=[];
  this.$http({
    url: this.$http.adornUrl('/sys/project/sumMoney'),
    method: 'get',
    params: this.$http.adornParams()
  }).then(({data}) => {
    for(var i =0;i<data.length;i++){
      name.push(data[i].userName);
      money.push(data[i].shijijine);
      huikuan.push(data[i].amount);
    }
    console.log(name);
    console.log(money);
    console.log(huikuan)
    myChart.setOption({        //加载数据图表
      xAxis: {
        data: name,
        axisLabel: {
          interval:0
        }
      },
      series: [{
        // 根据名字对应到相应的系列
        name: '签约金额',
        data: money,
        itemStyle: {
          normal: {
            label: {
              show: true,   //开启显示
              position: 'top', //在上方显示
              textStyle: {     //数值样式
                color: 'black',
                fontSize: 16
              }
            }
          }
        }

      },
        {
          // 根据名字对应到相应的系列
         name: '回款金额',
          data: huikuan,
          itemStyle: {
            normal: {
              label: {
                show: true,   //开启显示
                position: 'top', //在上方显示
                textStyle: {     //数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }

        }
      ],

    });
    window.onresize = myChart.resize;
})
                  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值