首先,编写代码之前,先下载好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/),显示效果如下: