版权声明:请点击关注 https://blog.csdn.net/weixin_42914677/article/details/89206749
首先,编写代码之前,先下载好jquery和echarts包,及你要显示的json数据
jquery下载地址:https://jquery.com/
echarts下载地址:https://echarts.baidu.com/dist/echarts.min.js
这是我的json数据(给大家参考)
data01_0.js
{"data":[{"xiaofeitotal":74801.9,"depName":"体育学院"},{"xiaofeitotal":208329.85,"depName":"初等教育学院"},
{"xiaofeitotal":129974.7,"depName":"化学与材料科学学院"},{"xiaofeitotal":104434.8,"depName":"国土资源与测绘学院"},{"xiaofeitotal":50864.53,"depName":"国际文化与教育学院"},{"xiaofeitotal":170182.5,"depName":"地理科学与规划学院"},{"xiaofeitotal":170251.88,"depName":"外国语学院"},
{"xiaofeitotal":237517.22,"depName":"政法学院"},
{"xiaofeitotal":113717.42,"depName":"教育科学学院"},
{"xiaofeitotal":134466.0,"depName":"数学与统计科学学院"},{"xiaofeitotal":232687.35,"depName":"文学院"},
{"xiaofeitotal":160498.58,"depName":"新闻传播学院"},
{"xiaofeitotal":58373.4,"depName":"旅游学院"},
{"xiaofeitotal":129007.2,"depName":"物流管理与工程学院"},{"xiaofeitotal":134831.52,"depName":"物理与电子工程学院"},{"xiaofeitotal":95851.9,"depName":"环境与生命科学学院"},{"xiaofeitotal":191083.99,"depName":"经济与管理学院"},
{"xiaofeitotal":104856.9,"depName":"美术设计学院"},
{"xiaofeitotal":70354.1,"depName":"职业技术教育学院"},
{"xiaofeitotal":103480.58,"depName":"计算机与信息工程学院"},{"xiaofeitotal":66184.08,"depName":"音乐舞蹈学院"},
{"xiaofeitotal":17986.6,"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++){
var m={};
m["value"]=d[i].xiaofeitotal;
m["name"]=d[i].depName;
valuelist1.push(m);
leblist.push(d[i].depName);
}
// 将数据添加到数据图表中
myChart.setOption({
legend: {
data:leblist
},
series: [{
// 根据名字对应到相应的系列
name:'消费金额',
type:'pie',
radius : '45%',
center: ['30%', '40%'],
label:{
// show:false
formatter:'{c}元'
},
data: valuelist1
},
{
// 根据名字对应到相应的系列
name:'消费金额2',
type:'pie',
radius : [30, 200],
center : ['77%', 300],
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/),显示效果如下: