weixin_51723436
小白码农·
采纳率50%
2020-10-31 14:41

怎么使用echarts饼状图绑定动态数据呢?

已采纳

各位大神,我的数据格式为这种:
approvalPerson: 180
approvalTask: 14
refusePerson: 180
refuseTask: 2
unApprovalPerson: 180
unApprovalTask: 2
怎么使用echarts饼状图绑定动态数据呢?
请求过来的数据只有数量。
以下是我的具体dai'ma

<template>
  <div class="echarts">
    <div id="main" style=" width: 1241px;
    height: 320px;
    left: -166px;
    top:-11px;"></div>
  </div>
</template>

<script>
var a;
export default {
  data(){
    return{
      approvalTask:0,//任务正在布控中
      refuseTask:0,//已拒绝任务
      unApprovalTask:0//待审批任务
    }
  },
  name: "Echarts",
  methods: {
    myEcharts() {
      // 基于准备好的dom,初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      this.$axios.post("/sjproject/task/getTaskAndPerson").then(res=>{
        console.log(res.data.data.detail);
        this.approvalTask=res.data.data.detail.approvalTask
        this.refuseTask=res.data.data.detail.refuseTask
        this.unApprovalTask=res.data.data.detail.unApprovalTask
        console.log(this.approvalTask);
        console.log(this.refuseTask);
        console.log(this.unApprovalTask);
      })


      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "center",
          left: 1100,
          top:120,
          data: ["已拒绝", "待审批完成", "正在布控"]
        },
        series: [
          {
            name: "布控任务统计",
            type: "pie",
            color: ["#F8C103", "#FF203A", "#3EAAEF"],
            radius: ["50%", "70%"],
            label: {
                show: true,
              position: "left",
              formatter:function(arg){
                // console.log(arg);
                return arg.name+ "     "+ arg.value
              },
            textStyle: {
                    color: '#999'
              },

            },
            labelLine: {
              length:25,
              length2: 150
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
                fontFamily:"PingFangSC-Medium",
                color:"#333",
              }
            },
            data: [
              { value: 14, name: "已拒绝" },
              { value:2, name: "待审批完成" },
              { value: 2, name: "正在布控" }
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.myEcharts();
  }
};
</script>

<style lang="less" scoped>
</style>


新手学习中,谢谢大神帮助。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • zmyalh 认识则是有缘 6月前

    这个很简单的啊,把你后台的返回数据赋值到你的 data里就可以了啊,
    orient: {"center",
    left: 1100,
    top:120,
    data: ["已拒绝", "待审批完成", "正在布控"]
    },

                你的接口返回的值this.orient=(就是你返回的值res.data里面的值)
    
    点赞 1 评论 复制链接分享

相关推荐