【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=" 800px;height:400px;"></div>
24                 <div id="mainBar" style=" 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>

View Code

页面中分别为柱状图和饼状图放置了两个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}
{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 });

View Code

**********************************************************************如果想动态从后台获取数据的话，往下看***************************************************************

***********************************************************************************************************************************************************************************

先看看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);

View Code

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                 array1.add(bundle.getString(string));
72                 List<Questionnaire> list = questionnaireService.findQuests(newList, string);
73                 array2.add(list.size());
74             }
75         }
76         jsonObject.put("X", array1);//键名为 X
77         jsonObject.put("V", array2);//键名为 V
78         
79         return jsonObject.toString();
80     }
81

View Code

JSONArray array1 = new JSONArray();用来存储X轴类目名

JSONArray array2 = new JSONArray();用来存储实际一一对应的数据

6》看看图示的结果

心得：

只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！

相关阅读:
idea安装
 IntelliJ IDEA 简单使用
 git客户端安装
 一、AJAX
一、JSP标签介绍,自定义标签
 注解
 线程
 网络编程Socket
一批量插入数据(使用批处理
 day87
原文地址：https://www.cnblogs.com/sxdcgaq8080/p/7071123.html