可视化编程---echarts动态加载json数据（饼状图）一

最新推荐文章于 2023-04-27 20:44:53 发布

鼎上西瓜刀

最新推荐文章于 2023-04-27 20:44:53 发布

阅读量785

点赞数

分类专栏： echarts 文章标签： echarts 可视化

本文链接：https://blog.csdn.net/weixin_42914677/article/details/89204180

版权

echarts 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

首先，编写代码之前，先下载好jquery和echarts包，及你要显示的json数据

jquery下载地址：https://jquery.com/

echarts下载地址：https://echarts.baidu.com/dist/echarts.min.js

这是我的json数据（给大家参考）

data01_0.js

{"data":[{"num":104,"sex":"女","depname":"体育学院"},
{"num":887,"sex":"女","depname":"初等教育学院"}
,{"num":385,"sex":"女","depname":"化学与材料科学学院"},
{"num":247,"sex":"女","depname":"国土资源与测绘学院"},
{"num":283,"sex":"女","depname":"国际文化与教育学院"},{"num":505,"sex":"女","depname":"地理科学与规划学院"},{"num":767,"sex":"女","depname":"外国语学院"},{"num":562,"sex":"女","depname":"政法学院"},{"num":564,"sex":"女","depname":"教育科学学院"},{"num":521,"sex":"女","depname":"数学与统计科学学院"},{"num":672,"sex":"女","depname":"文学院"},
{"num":1041,"sex":"女","depname":"新闻传播学院"},{"num":265,"sex":"女","depname":"旅游学院"},
{"num":417,"sex":"女","depname":"物流管理与工程学院"},{"num":423,"sex":"女","depname":"物理与电子工程学院"},{"num":317,"sex":"女","depname":"环境与生命科学学院"},{"num":616,"sex":"女","depname":"经济与管理学院"},
{"num":656,"sex":"女","depname":"美术设计学院"},
{"num":122,"sex":"女","depname":"职业技术教育学院"},{"num":418,"sex":"女","depname":"计算机与信息工程学院"},{"num":390,"sex":"女","depname":"音乐舞蹈学院"},{"num":113,"sex":"女","depname":"马克思主义学院"},{"num":251,"sex":"男","depname":"体育学院"},
{"num":114,"sex":"男","depname":"初等教育学院"},{"num":167,"sex":"男","depname":"化学与材料科学学院"},{"num":180,"sex":"男","depname":"国土资源与测绘学院"},
{"num":27,"sex":"男","depname":"国际文化与教育学院"},
{"num":151,"sex":"男","depname":"地理科学与规划学院"},{"num":55,"sex":"男","depname":"外国语学院"},{"num":134,"sex":"男","depname":"政法学院"},{"num":72,"sex":"男","depname":"教育科学学院"},{"num":119,"sex":"男","depname":"数学与统计科学学院"},
{"num":131,"sex":"男","depname":"文学院"},{"num":307,"sex":"男","depname":"新闻传播学院"},{"num":67,"sex":"男","depname":"旅游学院"},{"num":118,"sex":"男","depname":"物流管理与工程学院"},{"num":302,"sex":"男","depname":"物理与电子工程学院"},{"num":92,"sex":"男","depname":"环境与生命科学学院"},
{"num":159,"sex":"男","depname":"经济与管理学院"},{"num":451,"sex":"男","depname":"美术设计学院"},{"num":178,"sex":"男","depname":"职业技术教育学院"},{"num":293,"sex":"男","depname":"计算机与信息工程学院"},
{"num":174,"sex":"男","depname":"音乐舞蹈学院"},{"num":13,"sex":"男","depname":"马克思主义学院"}]}

第一步：新建一个文件夹（为了管理好自己编写的代码）echartsb01

第二步：将需要的文件复制到文件夹中

第三步：新建一个html页面（echartsb01.html），页面内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echartsb01</title>
</head>
<body>
<body>
<div id="main" style="height:600px;"></div>

 <!-- 引入 echarts.js -->
<script src="jquery-3.3.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="echartsb01.js"></script>
</body>
</html>

第四步：新建js文件echartsb01.js，为了把HTML页面的js分离出来，内容如下


jQuery(document).ready(function($) {

 var myChart = echarts.init(document.getElementById('main'));
 var  option = {
    title : {
        text: '凯里学院男生女生比例',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:[]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'男生人数',
            type:'pie',
            radius : [20, 200],
            center : ['30%', 300],
            roseType : 'radius',
            width: '40%',       // for funnel
            max: 40,            // for funnel
            itemStyle : {
                normal : {
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : true
                    }
                },
                emphasis : {
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : true
                    }
                }
            },
            data:[]
        },
        {
            name:'女生人数',
            type:'pie',
            radius : [30, 200],
            center : ['77%', 300],
            roseType : 'area',
            x: '50%',               // for funnel
            max: 40,                // for funnel
            sort : 'ascending',     // for funnel
            data:[]
        }
    ]
};


//设置图表
myChart.setOption(option);

//获取和处理数据
$.getJSON("data01_0.js",function(json){
    var d=json.data;
    var leblist = [];
    var valuelist1 = [];
    var valuelist2 = [];


// 循环获取男生数量，女生数量及院系名称
for(var i=0;i<d.length;i++){

    if(d[i].sex=='男'){
        // var m=new Map();
        // m.set("value",d[i].num);
        // m.set("name",d[i].depname);
        var m={};
        m["value"]=d[i].num;
        m["name"]=d[i].depname;
        valuelist1.push(m);
        leblist.push(d[i].depname);
    }else{
         var m={};
        m["value"]=d[i].num;
        m["name"]=d[i].depname;
        valuelist2.push(m);
    }
}

// 将数据添加到数据图表中
    myChart.setOption({
        legend: {
            data:leblist
        },
        series: [{
            // 根据名字对应到相应的系列
            name:'男生人数',
            data: valuelist1
        },
        {
            // 根据名字对应到相应的系列
            name:'女生人数',
            data: valuelist2
        }]
    });
});

//myChart.hideLoading();

});

第五步：设置浏览器（参照https://blog.csdn.net/weixin_42914677/article/details/89077653），并打开，然后将echartsb01.html拖到浏览器来打开。（如果显示不出来，请下载火狐浏览器http://www.firefox.com.cn/），显示效果如下：