使用Echarts+Ajax制作动态统计图表
1.使用Echats有两个比较方便的网站
1.https://echarts.baidu.com/echarts2/doc/example.html (统计图的样式)
2.https://echarts.baidu.com/builder.html (在线js定制生成)
2.引入ECharts
直接在官网下载所需ECharts文件,或者去上面定制生成js文件然后像引入普通JavaScript库一样用script标签引入即可。代码:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>ECharts入门</title> </head> <body> <!-- 引入ECharts文件 --> <script src= 'echarts.min.js' ></script> </body> </html> |
3.制作统计图(列举一个饼图和柱图)
1 2 3 4 | <!-- 查看饼状图 --> <div id= "main" style= "width: 600px;height:400px;" ></div> <!-- 查看柱状图 --> <div id= "main2" style= "width: 600px;height:400px;" ></div> |
4.初始化,指定图表配置和使用Ajax动态绑定数据
后台写方法查询数据是返回json格式,前台使用ajax调用解析,然后填充数据到Echaets里面就可以了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | //饼状图绑定数据 <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById( 'main' )); $.ajax({ url: "../../wxInterface/yqwxRepair.asmx/WXTJ" , //后台方法路径(返回json格式) type: "POST" , async: false , dataType: "json" , data: "" , contentType: "application/json" , cache: false , timeout: 30000, success: function (json) { json = eval( "(" + json.d + ")" ); //对后台json解析,根据返回的格式不同自行修改 var data = json.data; if (json) { var servicedata = []; for ( var i = 0; i < data.length; i++) { var obj = new Object(); obj.name = data[i].YQMC; //循环取你想要显示的名称,对应数据库字段 obj.value = data[i].CiShu; //循环取你想要显示的值 servicedata[i] = obj; //待会要填充的数据(包含名称和值) } myChart.setOption({ title: { text: '仪器维修次数' , subtext: '饼图' , x: 'center' }, tooltip: { trigger: 'item' , formatter: "{b} <br/>{c} : {d} %" //a 系列名称,b 数据项名称,c 数值,d 百分比 }, legend: { orient: 'vertical' , x: 'left' , data: data.YQMC //绑定名称 }, toolbox: { show: true , feature: { mark: { show: true }, dataView: { show: true , readOnly: false }, magicType: { show: true , type: [ 'pie' , 'funnel' ], option: { funnel: { x: '25%' , width: '50%' , funnelAlign: 'left' , max: 1548 } } }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true , series: [ { name: '点击量' , type: 'pie' , radius: '55%' , //饼图的半径大小 center: [ '50%' , '60%' ], //饼图的位置 data: servicedata //填充数据 } ] }) } }, error: function (errorMsg) { //请求失败时执行该函数 alert( "图表请求数据失败!" ); myChart.hideLoading(); } }); </script> //柱状图 <script type= "text/javascript" > var myChart2 = echarts.init(document.getElementById( 'main2' )); // 显示标题,图例和空的坐标轴 myChart2.setOption({ title: { text: '仪器维修次数' }, tooltip: {}, legend: { data: [ '仪器' ] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '仪器' , type: 'bar' , data: [] }] }); var names = []; //类别数组(实际用来盛放X轴坐标值) var nums = []; //销量数组(实际用来盛放Y坐标值) $.ajax({ url: "../../wxInterface/yqwxRepair.asmx/WXTJ" , type: "POST" , async: false , dataType: "json" , data: "" , contentType: "application/json" , cache: false , timeout: 30000, success: function (json) { json = eval( "(" + json.d + ")" ); var Data = json.data; if (json) { for ( var i = 0; i < Data.length; i++) { names.push(Data[i].YQMC); //挨个取出类别并填入类别数组 } for ( var i = 0; i < Data.length; i++) { nums.push(Data[i].CiShu); //挨个取出销量并填入销量数组 } myChart2.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: '仪器' , data: nums }] }); } }, error: function (errorMsg) { //请求失败时执行该函数 alert( "图表请求数据失败!" ); myChart2.hideLoading(); } }); </script> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步