关于echarts动态生成多个饼图的解决方法

lideshan · 发表于 2021-3-2 10:27

本帖最后由 lideshan 于 2021-3-2 10:30 编辑

关于echarts动态生成多个饼图的解决方法
在网上找了好久都没看到，于是就看了官网自己写一个能用的

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts动态生成多个饼图</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <style>
                .main{
                    /*延迟过度*/    
                    -moz-box-sizing:border-box; /* Firefox */
                    -webkit-box-sizing:border-box;
                    -o-box-sizing:border-box; /* Opera */
                    transition: all 0.3s linear;/*0.3s过渡时间*/
                    -moz-transition: all 0.3s linear; /* Firefox 4 */
                    -webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ 
                        width: 600px;
                        height: 400px;
                }
                .main:hover{
                        /*边框*/
                        border: solid 1px rgba(102, 146, 191, 0.68);
                        /*边角弧度*/
                        border-radius: 10px;
                        box-shadow: 7px 15px 30px #285a63;
                }
        </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main0" class="main"></div>
        <div id="main1" class="main"></div>
        <div id="main2" class="main"></div>
        <div id="main3" class="main"></div>
    <script type="text/javascript">
                var dataes=[
                        {"title":"第一个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},
                        {"title":"第二个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},
                        {"title":"第三个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},
                        {"title":"第四个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},
                ]
                
                // 对列表中的数据遍历，对应的每一条数据都生成一份饼图
                for (var i in dataes) {
                        var maines="main"+i
                        var myChart =echarts.init(document.getElementById(maines))
                        myChart.setOption({
                                title: {
                                        text:dataes[i]["title"],
                                        left: 'center'
                                    },
                                tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left',
                                    },
                                series : [
                                    {
                                        name: dataes[i]["title"],
                                        type: 'pie',
                                        radius: '55%',
                                        data:dataes[i]["series_data"]
                                    }
                                ]
                        })
                }
    </script>
</body>
</html>

Sen · 发表于 2021-3-2 10:46

网上找不到是有原因的呀........楼主加油, 可以去makeapie学习学习

lideshan · 发表于 2021-3-2 11:03

Sen 发表于 2021-3-2 10:46
网上找不到是有原因的呀........楼主加油, 可以去makeapie学习学习

感觉打开了新世界，谢谢，不过我只是需要用到这个例子，做一个数据统计

不是专业的

罩到胸前必有沟 · 发表于 2021-3-2 11:14

可以流批专业

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 关于echarts动态生成多个饼图的解决方法