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

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

鼎上西瓜刀

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

阅读量604

点赞数

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

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

版权

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: {
        orient : 'horizontal',
        bottom : '70px',
        data:[]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : []
};


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

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

// 循环获取男生数量，女生数量及院系名称

for(var i=0;i<d.length;i++){
    if(d[i].sex=='男'){
        leblist.push(d[i].depname);
    }
}

for(var i=0;i<leblist.length;i++){
    var renTotal=0;
    var dem=leblist[i];
    for(var j=0;j<d.length;j++){
        if(dem==d[j].depname){
            renTotal=renTotal+d[j].num;
        }
    }
    var m={};
    m["name"]=dem;
    m["value"]=renTotal;
    valuelist1.push(m);

}

// 将数据添加到数据图表中
    myChart.setOption({
        legend: {
            data:leblist
        },
        series: [{
            // 根据名字对应到相应的系列
            name:'学院人数',
            type:'pie',
            radius : '70%',
            center: ['50%', '40%'],
            roseType : 'area',
            label:{
                // show:false
                formatter:'{c}人--{b}'
            },
            data: valuelist1
        }]
    });
});

//myChart.hideLoading();

});

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

鼎上西瓜刀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
可视化编程---echarts动态加载json数据（饼状图）三

首先，编写代码之前，先下载好jquery和echarts包，及你要显示的json数据jquery下载地址：https://jquery.com/echarts下载地址：https://echarts.baidu.com/dist/echarts.min.js这是我的json数据（给大家参考）data01_0.js{"data":[{"num":104,"sex":"女",...
复制链接

扫一扫