Echarts百度Echarts的使用入门+两个简单的小例子+心得
Posted Angel挤一挤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts百度Echarts的使用入门+两个简单的小例子+心得相关的知识，希望对你有一定的参考价值。
Echarts对于展示结果，有一个很好的表达方式。
1.首先，在官网将js下载到本地，引用到页面上
这里是在开发环境，所以下载最后源代码这个
managerResult.jsp
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="utf-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="apple-mobile-web-app-capable" content="yes" /> 10 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> 11 <meta name="description" content=""> 12 <meta name="keywords" content=""> 13 <title>Echarts图表统计结果</title> 14 <link rel="stylesheet" type="text/css" href="../quest/css/bootstrap.min.css"/> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <input type="hidden" name=\'allNum\' value="${allNum}"/> 20 <input type="hidden" name=\'listNum\' value="${listNum}"/> 21 <textarea style="display: none;" name="condition">${condition}</textarea> 22 <textarea style="display: none;" name="questOptions">${questOptions}</textarea> 23 <div id="mainPie" style="width: 800px;height:400px;"></div> 24 <div id="mainBar" style="width: 1000px;height:600px;"></div> 25 </div> 26 </div> 27 </body> 28 <script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script> 29 <script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 30 <script type="text/javascript" src= "../quest/js/echarts.js"></script> 31 <script type="text/javascript" src= "../quest/js/managerResult.js"></script> 32 </html>
页面中分别为 柱状图和 饼状图 放置了两个div作为容器
2.managerResult.js
步骤就3步
1》var myChartBar = echarts.init(document.getElementById(\'mainBar\')); 获取容器
2》配置option
3》myChartBar.setOption(optionBar); 初始化图表进行展示
1 $(document).ready(function(){ 2 //获取饼状图容器 并 初始化echarts实例 3 var myChartPie = echarts.init(document.getElementById(\'mainPie\')); 4 5 6 //饼状图 配置 7 var optionPie = { 8 title : {//标题 9 text: \'问卷统计调查结果\', 10 subtext: \'多条件组合\', 11 x:\'center\' 12 }, 13 tooltip : {//光标在上显示信息 14 trigger: \'item\', 15 formatter: "{a} <br/>{b} : {c} ({d}%)", 16 backgroundColor : \'#986c11\', 17 }, 18 toolbox: {//工具按钮 19 show : true, 20 feature : { 21 mark : {show: true}, 22 dataView : {show: true, readOnly: false}, 23 magicType : { 24 show: true, 25 type: [\'pie\', \'funnel\'] 26 }, 27 restore : {show: true}, 28 saveAsImage : {show: true} 29 } 30 }, 31 legend: {//图例 32 orient: \'vertical\', 33 left: \'left\' , 34 data: [\'统计项\',\'未统计项\'] 35 }, 36 series : [//系列列表 图表类型+数据源 37 { 38 name: \'问卷统计\', 39 type: \'pie\', 40 radius : \'55%\', 41 center: [\'50%\', \'60%\'], 42 data:[ 43 {value:335, name:\'统计项\'}, 44 {value:310, name:\'未统计项\'} 45 ], 46 itemStyle: { 47 emphasis: { 48 shadowBlur: 100, 49 shadowOffsetX: 10, 50 shadowColor: \'rgba(0, 0, 0, 0.5)\' 51 } 52 }, 53 label: { 54 normal: { 55 show: true, 56 position: \'outside\', 57 formatter :\'{a}\\n{b} : {c} ({d}%)\', 58 textStyle:{ 59 fontSize : 2, 60 fontStyle : \'normal\' 61 } 62 }, 63 } 64 65 } 66 ] 67 }; 68 69 70 // 使用刚指定的配置项和数据显示图表。 71 myChartPie.setOption(optionPie); 72 73 74 75 //获取饼状图容器 并 初始化echarts实例 76 var myChartBar = echarts.init(document.getElementById(\'mainBar\')); 77 78 //柱状图配置 79 var optionBar = { 80 title:{ 81 show : true, 82 text : \'多条件分量统计\', 83 x:\'center\' 84 }, 85 color: [\'#3398DB\'], 86 tooltip : { 87 trigger: \'axis\', 88 axisPointer : { // 坐标轴指示器，坐标轴触发有效 89 type : \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\' 90 } 91 }, 92 toolbox: { 93 show : true, 94 feature : { 95 dataView : {show: true, readOnly: false}, 96 magicType : {show: true, type: [\'line\', \'bar\']}, 97 restore : {show: true}, 98 saveAsImage : {show: true} 99 } 100 }, 101 grid: {//网格配置 102 show : true, 103 left: \'3%\', 104 right: \'15%\', 105 bottom: \'3%\', 106 shadowBlur : 10, 107 containLabel: true 108 }, 109 xAxis : [ 110 { 111 name : \'筛选条件类目\', 112 type : \'category\', 113 data : [ 114 { 115 value: \'周一\', 116 textStyle: { 117 fontSize: 4, 118 baseline : \'middle\', 119 } 120 }, \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\'], 121 axisTick: { 122 alignWithLabel: true 123 }, 124 axisLabel :{ 125 rotate : 50 126 } 127 128 } 129 ], 130 yAxis : [ 131 { 132 name : \'统计人数\', 133 type : \'value\' 134 } 135 ], 136 series : [ 137 { 138 name:\'问卷人数\', 139 type:\'bar\', 140 barWidth: \'30%\', 141 label: { 142 normal: { 143 show: true, 144 position: \'top\', 145 formatter :\'{b} : {c}\', 146 textStyle:{ 147 fontSize : 2, 148 fontStyle : \'normal\' 149 } 150 } 151 }, 152 data:[10, 52, 200, 334, 390, 330, 220] 153 } 154 ] 155 }; 156 157 158 myChartBar.setOption(optionBar); 159 160 161 162 163 });
**********************************************************************如果想动态从后台获取数据的话，往下看***************************************************************
***********************************************************************************************************************************************************************************
先看看js中，ajax从后台获取的数据，赋值给图表的data即可
4》带有ajax的Echarts 实例化过程
1 var condition = $("textarea[name=\'condition\']").text(); 2 var questOptions = $("textarea[name=\'questOptions\']").text(); 3 //全局变量，便于给图表赋值 4 var XData;//X轴类目 5 var VData;//实际数据 6 7 //ajax从后台获取数据给全局变量 8 $.ajax({url:"/questionnaire/barDate.jhtml", 9 type:"get", 10 async:false, 11 traditional:false, 12 data:{questOptions:questOptions,condition:condition}, 13 success:function(data){ 14 //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量 15 XData = JSON.parse(data).X; 16 VData = JSON.parse(data).V; 17 } 18 }); 19 20 //获取饼状图容器 并 初始化echarts实例 21 var myChartBar = echarts.init(document.getElementById(\'mainBar\')); 22 23 //柱状图配置 24 var optionBar = { 25 title:{ 26 show : true, 27 text : \'多条件分量统计\', 28 x:\'center\' 29 }, 30 color: [\'#3398DB\'], 31 tooltip : { 32 trigger: \'axis\', 33 axisPointer : { // 坐标轴指示器，坐标轴触发有效 34 type : \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\' 35 } 36 }, 37 toolbox: { 38 show : true, 39 feature : { 40 dataView : {show: true, readOnly: false}, 41 magicType : {show: true, type: [\'line\', \'bar\']}, 42 restore : {show: true}, 43 saveAsImage : {show: true} 44 } 45 }, 46 grid: {//网格配置 47 show : true, 48 left: \'3%\', 49 right: \'15%\', 50 bottom: \'15%\', 51 shadowBlur : 10, 52 containLabel: true 53 }, 54 xAxis : [ 55 { 56 name : \'筛选条件类目\', 57 type : \'category\', 58 data : XData, 59 axisTick: { 60 alignWithLabel: true 61 }, 62 axisLabel :{ 63 rotate : 50 64 } 65 66 } 67 ], 68 yAxis : [ 69 { 70 name : \'统计人数\', 71 type : \'value\' 72 } 73 ], 74 series : [ 75 { 76 name:\'问卷人数\', 77 type:\'bar\', 78 barWidth: \'30%\', 79 label: { 80 normal: { 81 show: true, 82 position: \'top\', 83 formatter :\'{b} : {c}\', 84 textStyle:{ 85 fontSize : 2, 86 fontStyle : \'normal\' 87 } 88 } 89 }, 90 data:VData 91 } 92 ] 93 }; 94 95 96 myChartBar.setOption(optionBar);
5》后台部分代码【只看json数据 组装部分】
1 @RequestMapping(value= "/barDate" ,produces = "text/html;charset=UTF-8") 2 @ResponseBody 3 public String barDate(HttpServletRequest request,String condition,String questOptions) throws UnsupportedEncodingException{ 4 5 //勾选项 6 questOptions = questOptions.replaceAll("category=", ""); 7 String [] questArr = questOptions.equals("")? new String[0]:questOptions.split(";"); 8 //填空题 9 Map<String,Object> mapList = doMap(condition); 10 System.out.println("勾选项："+questArr); 11 12 13 JSONObject jsonObject = new JSONObject(); 14 JSONArray array1 = new JSONArray(); 15 JSONArray array2 = new JSONArray(); 16 Map<String,Object> newList = new HashMap<String, Object>(); 17 //填空题 18 mapList.forEach((key,value)->{ 19 boolean flag = false; 20 if(value != null){ 21 if(key.contains("Arr")){ 22 String newKey = key.substring(0,key.lastIndexOf("Arr")); 23 if(key.contains("age")){ 24 Date[] date = (Date[]) value; 25 if(date[0] != null && date[1] != null){ 26 array1.add("年龄段:"+date[0]+"-"+date[1]); 27 flag = true; 28 }else if(date[0] != null || date[1] != null){ 29 array1.add("年龄:"+date[0] == null ? date[1] : date[0]); 30 flag = true; 31 } 32 }else{ 33 Double [] v = (Double[]) value; 34 if(v[0] != null && v[1] != null){ 35 array1.add(newKey+"段:"+v[0]+"-"+v[1]); 36 flag = true; 37 }else if(v[0] != null || v[1] != null){ 38 array1.add(newKey+":"+v[0] == null ? v[1] : v[0]); 39 flag = true; 40 } 41 } 42 } 43 if(key.contains("userName")){ 44 array1.add("姓名:"+value); 45 flag = true; 46 } 47 if(key.contains("sex")){ 48 array1.add("性别:"+value); 49 flag = true; 50 } 51 if(key.contains("memopause")){ 52 array1.add("是否绝经:"+value); 53 flag = true; 54 } 55 56 if(flag){ 57 newList.put(key, value); 58 List<Questionnaire> list = questionnaireService.findQuests(newList, new String[0]); 59 newList.clear(); 60 array2.add(list.size()); 61 flag = false; 62 } 63 64 } 65 }); 66 //获取资源文件中键值对 67 ResourceBundle bundle = ResourceBundle.getBundle("quest"); 68 69 if(questArr.length >0){ 70 for (String string : questArr) { 71 Echarts入门教程精简实用系列