jquery-3.3.1.j文件下载地址:(17条消息) jquery-3.3.1.js的压缩包_L_fredoom的博客-CSDN博客
echarts.js文件下载地址:Apache ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.js"></script>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM--->
<div id="main" style="width: 700px; height: 500px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
myChart.showLoading(); // 加载状态-开始
var option = {
color: ['red', 'blue', 'LimeGreen', 'Teal', 'Purple', 'Olive'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度为0.1
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: { //配置标题组件
text: '特色高水平专业群', //设置主标题
subtext: '各专业学生人数统计', //设置次标题
left: 'center',
top: 8 //设置主、次标题都左右居中
},
series: [ //配置数据系列
{
name: '特高专业群之专业:',
type: 'pie', //设置图表类型为饼图
radius: ['45%', '75%'], //设置饼图内、外圆的半径
center: ['50%', '58%'], //设置圆心的位置
data: [
{
"value": 490,
"name": "软件技术"
},
{
"value": 410,
"name": "计算机网络技术"
},
{
"value": 399,
"name": "大数据技术"
},
{
"value": 214,
"name": "人工智能技术"
},
{
"value": 196,
"name": "云计算技术"
},
{
"value": 123,
"name": "移动应用技术"
}
]
}
]
};
// 加载状态2秒结束
setTimeout(function(){
myChart.setOption(option);
myChart.hideLoading();
},2000);
</script>
</body>
</html>