【Echarts】百度Echarts的使用入門+兩個簡單的小例子+心得

本文轉載自查看原文 2017-06-23 17:50 4798

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>

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}\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 });

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！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度echarts 地圖使用實例百度ECharts繪圖庫的使用百度Echarts安裝和使用 echarts 如何結合百度地圖使用百度ECHARTS 餅圖使用心得處理data屬性百度echarts可以做什么百度eCharts體驗百度eCharts體驗百度eCharts體驗記一次Echarts地圖百度坐標使用