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() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。注意:新元素将添加在数组的末尾。此方法改变数组的长度。

  • 9
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要在echarts饼图中引入后端数据并显示,你可以按照以下步骤进行操作: 1. 从后端获取数据:使用后端的API或其他方式,获取饼图所需的数据。这可能涉及到发送HTTP请求,接收和解析后端返回数据。 2. 解析数据:根据后端返回数据格式,将其解析为echarts可识别的格式。通常,饼图需要一个包含数据项名称和值的数组。 3. 初始化echarts实例:在前端页面中引入echarts库,并根据需要创建一个容器元素,用于显示饼图。 4. 配置饼图选项:使用echarts提供的配置选项,设置饼图的样式、标题、图例等。 5. 将数据传入饼图:将解析后的数据传递给echarts实例,并将其绑定到饼图上。 6. 渲染饼图:调用echarts实例的渲染方法,将饼图显示在页面上。 下面是一个示例代码,演示了如何引入后端数据并显示饼图: ```javascript // 1. 从后端获取数据 fetch('api/data') // 假设后端API返回JSON格式的数据 .then(response => response.json()) .then(data => { // 2. 解析数据 const pieData = data.map(item => { return { name: item.name, value: item.value }; }); // 3. 初始化echarts实例 const chart = echarts.init(document.getElementById('chart-container')); // 4. 配置饼图选项 const options = { title: { text: '饼图示例', left: 'center' }, series: [{ name: '数据', type: 'pie', radius: '50%', data: pieData }] }; // 5. 将数据传入饼图 chart.setOption(options); // 6. 渲染饼图 chart.render(); }); ``` 请注意,上述代码仅为示例,实际情况可能会根据你的后端数据格式和前端框架有所不同。你需要根据自己的实际情况进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值