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>
