echarts饼图如何渲染后端返回的数据

本文介绍了一种使用ECharts库来展示数据的方法,通过获取后台数据并利用JavaScript进行处理,最终在网页上呈现为直观的饼状图。具体包括了如何通过API请求获取数据、解析数据以及使用ECharts进行图表的初始化和绘制。
//假设这是后端返回的数据结构
{
	"code": 0,
	"msg": "OK",
	"result": 
		[{
			"count": 1,
			"name": "其他"
		}, {
			"count": 38,
			"name": "平台登记"
		}, {
			"count": 97,
			"name": "微信上报"
		}, {
			"count": 1,
			"name": "牛皮癣"
		}, {
			"count": 87196,
			"name": "监督员上报"
		}, {
			"count": 4705,
			"name": "视频上报"
		}]
}
methods:{
	//接口请求方法
	search() {
	      getLYFXData({ timeType: this.timeType }).then((res) => {
	        this.amount = res.result;
	        this.drawSource();
	      });
    },
    //echarts初始化
    drawSource() {
      let myChart = this.$echarts.initdocument.getElementById("echarts_source"));
      let arr = [];
      this.amount.forEach((element) => {
          arr.push({
            value: element.count, //将数组的conut值赋给value
            name: element.name, //将数组的name值赋给name
          });
      });
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            //在此赋值即可
            data: arr,
			......
          }
    }
}
  • forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。

  • push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。注意:新元素将添加在数组的末尾。此方法改变数组的长度。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值