塔塔庙 2019-07-03 16:19 采纳率: 50%
浏览 2076
已采纳

echarts饼状图绑定动态数据数据格式和其他不一样。

各位大神,我的数据格式为这种:
[{"energy_name":"CDA","sum_use_value":2978.161},
{"energy_name":"HCH","sum_use_value":1719.139},
{"energy_name":"LCH","sum_use_value":409.763},
{"energy_name":"MCH","sum_use_value":107.145},
{"energy_name":"PV_M6A","sum_use_value":84.830},
{"energy_name":"PV_M6B","sum_use_value":19.462}]
怎么使用echarts饼状图绑定动态数据呢?

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

  • 写回答

1条回答 默认 最新

  • 毕小宝 博客专家认证 2019-07-03 16:47
    关注

    走一层中间转换,将这些数据转换为饼图图的数据就可以了啦。

    app.title = '环形图';
    
    var myData = [{"energy_name":"CDA","sum_use_value":2978.161},
    {"energy_name":"HCH","sum_use_value":1719.139},
    {"energy_name":"LCH","sum_use_value":409.763},
    {"energy_name":"MCH","sum_use_value":107.145},
    {"energy_name":"PV_M6A","sum_use_value":84.830},
    {"energy_name":"PV_M6B","sum_use_value":19.462}];
    
    var pieData = [];
    var legendData = [];
    for(var i=0;i<myData.length;i++){
        var temp = {};
        temp.value = myData[i].sum_use_value;
        temp.name = myData[i].energy_name;
        pieData.push(temp);
        legendData.push(myData[i].energy_name);
    }
    
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:legendData
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:pieData
            }
        ]
    };
    
    

    上述代码直接贴在 echarts 官网https://echarts.baidu.com/examples/editor.html?c=pie-doughnut 就能看到效果了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题