├── License
├── MyECharts
    └── resource
    │   ├── ECharts
    │       └── echarts.js
    │   └── MyECharts.js
├── README.md
├── demo.html
├── index.html
└── readme.txt


/License:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Lean Fish
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MyECharts/resource/MyECharts.js:
--------------------------------------------------------------------------------
  1 | //各种图形需要的数据结构：
  2 | // 
  3 | //pie图：
  4 | /* [
  5 |     { name: 'Firefox', value: 45.0 },
  6 |     { name: 'IE', value: 26.8 },
  7 |     { name: 'Safari', value: 8.5 },
  8 |     { name: 'Opera', value: 6.2 },
  9 |     { name: '其他', value: 0.7 }];
 10 | 
 11 |   Line图、Bar图：
 12 | [
 13 |     { group: 'Beijing', name: '1月', value: 10 },
 14 |     { group: 'Beijing', name: '2月', value: 15 },
 15 |     { group: 'Beijing', name: '3月', value: 12 },
 16 |     { group: 'Beijing', name: '4月', value: 14 },
 17 |     { group: 'Tokyo', name: '1月', value: 12 },
 18 |     { group: 'Tokyo', name: '2月', value: 15 },
 19 |     { group: 'Tokyo', name: '3月', value: 2 },
 20 |     { group: 'Tokyo', name: '4月', value: 14 }];
 21 | 
 22 | //散点图
 23 |         var dataAll = [
 24 |         [
 25 |             [10.0, 8.04],
 26 |             [8.0, 6.95],
 27 |             [13.0, 7.58],
 28 |             [9.0, 8.81],
 29 |             [11.0, 8.33],
 30 |             [14.0, 9.96],
 31 |             [6.0, 7.24],
 32 |             [4.0, 4.26],
 33 |             [12.0, 10.84],
 34 |             [7.0, 4.82],
 35 |             [5.0, 5.68]
 36 |         ],
 37 |         [
 38 |             [10.0, 9.14],
 39 |             [8.0, 8.14],
 40 |             [13.0, 8.74],
 41 |             [9.0, 8.77],
 42 |             [11.0, 9.26],
 43 |             [14.0, 8.10],
 44 |             [6.0, 6.13],
 45 |             [4.0, 3.10],
 46 |             [12.0, 9.13],
 47 |             [7.0, 7.26],
 48 |             [5.0, 4.74]
 49 |         ],
 50 |         [
 51 |             [10.0, 7.46],
 52 |             [8.0, 6.77],
 53 |             [13.0, 12.74],
 54 |             [9.0, 7.11],
 55 |             [11.0, 7.81],
 56 |             [14.0, 8.84],
 57 |             [6.0, 6.08],
 58 |             [4.0, 5.39],
 59 |             [12.0, 8.15],
 60 |             [7.0, 6.42],
 61 |             [5.0, 5.73]
 62 |         ],
 63 |         [
 64 |             [8.0, 6.58],
 65 |             [8.0, 5.76],
 66 |             [8.0, 7.71],
 67 |             [8.0, 8.84],
 68 |             [8.0, 8.47],
 69 |             [8.0, 7.04],
 70 |             [8.0, 5.25],
 71 |             [19.0, 12.50],
 72 |             [8.0, 5.56],
 73 |             [8.0, 7.91],
 74 |             [8.0, 6.89]
 75 |         ]
 76 |         ];
 77 | 
 78 |     */
 79 | /*
 80 | 2017-04-08，创建
 81 | */
 82 | 
 83 | //判断数组中是否包含某个元素
 84 | Array.prototype.contains = function (obj) {
 85 |     var i = this.length;
 86 |     while (i--) {
 87 |         if (this[i] === obj) {
 88 |             return true;
 89 |         }
 90 |     }
 91 |     return false;
 92 | }
 93 | 
 94 | var MyECharts = {
 95 |     //格式化数据
 96 |     ChartDataFormate: {
 97 |         FormateNOGroupData: function (data) {
 98 |             var categories = [];
 99 |             var datas = [];
100 |             for (var i = 0; i < data.length; i++) {
101 |                 categories.push(data[i].name || '');
102 |                 temp_series = { value: data[i].value || 0, name: data[i].name };
103 |                 datas.push(temp_series);
104 |             }
105 |             return { category: categories, data: datas };
106 |         },
107 |         //处理分组数据，数据格式：group：XXX，name：XXX，value：XXX用于折线图、柱形图（分组，堆积）
108 |         //参数：数据、展示类型
109 |         FormatGroupData: function (data, type) {
110 |             var groups = new Array();
111 |             var names = new Array();
112 |             var series = new Array();
113 |             for (var i = 0; i < data.length; i++) {
114 |                 if (!groups.contains(data[i].group)) {
115 |                     groups.push(data[i].group);
116 |                 }
117 |                 if (!names.contains(data[i].name)) {
118 |                     names.push(data[i].name);
119 |                 }
120 |             }
121 |             for (var i = 0; i < groups.length; i++) {
122 |                 var temp_series = {};
123 |                 var temp_data = new Array();
124 |                 for (var j = 0; j < data.length; j++) {
125 |                     for (var k = 0; k < names.length; k++)
126 |                         if (groups[i] == data[j].group && data[j].name == names[k])
127 |                             temp_data.push(data[j].value);
128 |                     }
129 |                     temp_series = { name: groups[i], type: type, data: temp_data };
130 |                     series.push(temp_series);
131 |                 }
132 |                 return { legend: groups,category: names, series: series };
133 |             }
134 |         },
135 |     //生成图形
136 |     ChartOptionTemplates: {
137 |         //柱状图
138 |         Bar: function (title, subtext, data) {
139 |             var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'bar');
140 |             var option = {
141 |                 title: {
142 |                     text: title || '',
143 |                     subtext: subtext || ''
144 |                 },
145 |                 legend: {
146 |                     data:datas.legend
147 |                 },
148 |                 tooltip: {
149 |                 	 trigger: 'axis'
150 |                 },
151 |                 calculable : true,
152 |                 toolbox: {
153 |                     show : true,
154 |                     feature : {
155 |                         mark : {show: true},
156 |                         dataView : {show: true, readOnly: false},
157 |                         magicType : {show: true, type: ['line', 'bar']},
158 |                         restore : {show: true},
159 |                         saveAsImage : {show: true}
160 |                     }
161 |                 },
162 |                 xAxis: [
163 |                 {
164 |                     type: 'category',
165 |                     data: datas.category
166 |                 }
167 |                 ],
168 |                 yAxis: [
169 |                 {
170 |                     type: 'value'
171 |                 }
172 |                 ],
173 |                 series: datas.series
174 |             };
175 |             return option;
176 |         },
177 |         //折线图
178 |         Line: function (title, subtext, data) {
179 |             var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'line');
180 |             var option = {
181 |                 title: {
182 |                     text: title || '',
183 |                     subtext: subtext || ''
184 |                 },
185 |                 legend: {
186 |                     data:datas.legend
187 |                 },
188 |                 tooltip: {
189 |                     show: true
190 |                 },
191 |                 xAxis: [
192 |                 {
193 |                     type: 'category',
194 |                     data: datas.category
195 |                 }
196 |                 ],
197 |                 yAxis: [
198 |                 {
199 |                     type: 'value'
200 |                 }
201 |                 ],
202 |                 series: datas.series
203 |             };
204 |             return option;
205 |         },
206 |         //饼图
207 |         Pie: function (title, subtext, data) {
208 |             var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);
209 |             var option = {
210 |                 title: {
211 |                     text: title || '',
212 |                     subtext: subtext || ''
213 |                 },
214 |                 tooltip: {
215 |                     show: true,
216 |                     trigger: 'item',
217 |                     formatter: "{a} <br/>{b} : {c} ({d}%)"
218 |                 },
219 |                 legend: {
220 |                     orient: 'vertical',
221 |                     left: 'left',
222 |                     data: datas.category
223 |                 },
224 |                 series: [
225 |                 {
226 |                     name: title,
227 |                     type: 'pie',
228 |                     radius: '55%',
229 |                     center: ['50%', '60%'],
230 |                     data: datas.data,
231 |                     itemStyle: {
232 |                         emphasis: {
233 |                             shadowBlur: 10,
234 |                             shadowOffsetX: 0,
235 |                             shadowColor: 'rgba(0, 0, 0, 0.5)'
236 |                         }
237 |                     }
238 |                 }
239 |                 ]
240 |             };
241 |             return option;
242 |         },
243 |         //散点图
244 |         Scatter: function (title, subtext, data) {
245 |             var markLineOpt = {
246 |                 animation: false,
247 |                 label: {
248 |                     normal: {
249 |                         formatter: 'y = 0.5 * x + 3',
250 |                         textStyle: {
251 |                             align: 'right'
252 |                         }
253 |                     }
254 |                 },
255 |                 lineStyle: {
256 |                     normal: {
257 |                         type: 'solid'
258 |                     }
259 |                 },
260 |                 tooltip: {
261 |                     formatter: 'y = 0.5 * x + 3'
262 |                 },
263 |                 data: [[{
264 |                     coord: [0, 3],
265 |                     symbol: 'none'
266 |                 }, {
267 |                     coord: [20, 13],
268 |                     symbol: 'none'
269 |                 }]]
270 |             };
271 | 
272 | 
273 |             var option = {
274 |                 title: {
275 |                     text: 'Anscombe\'s quartet',
276 |                     x: 'center',
277 |                     y: 0
278 |                 },
279 |                 grid: [
280 |                 {x: '7%', y: '7%', width: '38%', height: '38%'},
281 |                 {x2: '7%', y: '7%', width: '38%', height: '38%'},
282 |                 {x: '7%', y2: '7%', width: '38%', height: '38%'},
283 |                 {x2: '7%', y2: '7%', width: '38%', height: '38%'}
284 |                 ],
285 |                 tooltip: {
286 |                     formatter: 'Group {a}: ({c})'
287 |                 },
288 |                 xAxis: [
289 |                     {gridIndex: 0, min: 0, max: 20},
290 |                     {gridIndex: 1, min: 0, max: 20},
291 |                     {gridIndex: 2, min: 0, max: 20},
292 |                     {gridIndex: 3, min: 0, max: 20}
293 |                 ],
294 |                 yAxis: [
295 |                     {gridIndex: 0, min: 0, max: 15},
296 |                     {gridIndex: 1, min: 0, max: 15},
297 |                     {gridIndex: 2, min: 0, max: 15},
298 |                     {gridIndex: 3, min: 0, max: 15}
299 |                 ],
300 |                 series: [
301 |                 {
302 |                     name: 'I',
303 |                     type: 'scatter',
304 |                     xAxisIndex: 0,
305 |                     yAxisIndex: 0,
306 |                     data: data[0],
307 |                     markLine: markLineOpt
308 |                 },
309 |                 {
310 |                     name: 'II',
311 |                     type: 'scatter',
312 |                     xAxisIndex: 1,
313 |                     yAxisIndex: 1,
314 |                     data: data[1],
315 |                     markLine: markLineOpt
316 |                 },
317 |                 {
318 |                     name: 'III',
319 |                     type: 'scatter',
320 |                     xAxisIndex: 2,
321 |                     yAxisIndex: 2,
322 |                     data: data[2],
323 |                     markLine: markLineOpt
324 |                 },
325 |                 {
326 |                     name: 'IV',
327 |                     type: 'scatter',
328 |                     xAxisIndex: 3,
329 |                     yAxisIndex: 3,
330 |                     data: data[3],
331 |                     markLine: markLineOpt
332 |                 }
333 |                 ]
334 |             };
335 |             return option;
336 |         }
337 |     },
338 |     //图形展示
339 |     //参数：图形option、图形显示区域id
340 |     RenderChart: function (option, containerId) {
341 |         var container = eval("document.getElementById('" + containerId + "');");//获取图形显示区域
342 |         var myChart = echarts.init(container);
343 |         myChart.setOption(option);// 为echarts对象加载数据 
344 |     }
345 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 封装Echarts
 2 | 百度的Echarts是一款丰富的前端展示框架，用于各种图表统计显示。但是使用起来还需要写大量重复的js代码，这里简单的封装了下，调用只需要写简短的代码即可。
 3 | 
 4 | ## 图形展示
 5 | ![Demo展示](http://images.cnblogs.com/cnblogs_com/yangtze-yufei/860899/o_%e7%bb%9f%e8%ae%a1%e5%9b%be.png)
 6 | 
 7 | ## 代码实例
 8 | ![代码实例](http://images.cnblogs.com/cnblogs_com/yangtze-yufei/860899/o_%e4%bb%a3%e7%a0%81.png)
 9 | 
10 | ## TODO
11 | >1. 有很多特性没有使用到，待研究ECharts官方文档；
12 | >2. 数据组织还很繁琐。
13 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <meta charset="utf-8">
 4 |     <title>ECharts</title>
 5 | </head>
 6 | <body>
 7 |     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 8 |     <div id="main" style="height:400px"></div>
 9 |     <!-- ECharts单文件引入 -->
10 |     <script src="MyECharts/ECharts/echarts.js"></script>
11 |     <script type="text/javascript">
12 | 
13 | 
14 |         var option = {
15 |             tooltip: {
16 |                 show: true
17 |             },
18 |             legend: {
19 |                 data: ['销量']
20 |             },
21 |             xAxis: [
22 |                 {
23 |                     type: 'category',
24 |                     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
25 |                 }
26 |             ],
27 |             yAxis: [
28 |                 {
29 |                     type: 'value'
30 |                 }
31 |             ],
32 |             series: [
33 |                 {
34 |                     "name": "销量",
35 |                     "type": "bar",
36 |                     "data": [5, 20, 40, 10, 10, 20]
37 |                 }
38 |             ]
39 |         };
40 |         // 基于准备好的dom，初始化echarts图表
41 |         var myChart = echarts.init(document.getElementById('main'));
42 | 
43 |         // 为echarts对象加载数据 
44 |         myChart.setOption(option);
45 |     </script>
46 | </body>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 |     <meta charset="utf-8">
  4 |     <title>ECharts-Demo</title>
  5 | </head>
  6 | <body>
  7 |     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8 |     <div id="container1" style="height: 400px"></div>
  9 |     <div id="container2" style="height: 400px"></div>
 10 |     <div id="container3" style="height: 400px"></div>
 11 |     <div id="container4" style="height: 400px"></div>
 12 |     <!-- ECharts文件引入 -->
 13 |     <script src="MyECharts/resource/ECharts/echarts.js"></script>
 14 |     <script src="MyECharts/resource/MyECharts.js"></script>
 15 |     <script type="text/javascript">
 16 |         var data1 = [
 17 |             { group: 'Beijing', name: '1月', value: 10 },
 18 |             { group: 'Beijing', name: '2月', value: 15 },
 19 |             { group: 'Beijing', name: '3月', value: 12 },
 20 |             { group: 'Beijing', name: '4月', value: 14 },
 21 |             { group: 'Tokyo', name: '1月', value: 12 },
 22 |             { group: 'Tokyo', name: '2月', value: 15 },
 23 |             { group: 'Tokyo', name: '3月', value: 2 },
 24 |             { group: 'Tokyo', name: '4月', value: 14 }];
 25 | 
 26 |         var opt1 = MyECharts.ChartOptionTemplates.Bar('各个城市气温趋势', '°C', data1);
 27 |         MyECharts.RenderChart(opt1, 'container1');
 28 | 
 29 |         var data2 = [
 30 |             { group: 'Beijing', name: '1月', value: 10 },
 31 |             { group: 'Beijing', name: '2月', value: 15 },
 32 |             { group: 'Beijing', name: '3月', value: 12 },
 33 |             { group: 'Beijing', name: '4月', value: 14 },
 34 |             { group: 'Tokyo', name: '1月', value: 12 },
 35 |             { group: 'Tokyo', name: '2月', value: 15 },
 36 |             { group: 'Tokyo', name: '3月', value: 2 },
 37 |             { group: 'Tokyo', name: '4月', value: 14 }];
 38 | 
 39 |         //var opt2 = MyECharts.ChartOptionTemplates.Line('各个城市气温趋势', '°C', data2);
 40 |         //MyECharts.RenderChart(opt2, 'container2');
 41 | 
 42 |         var data3 = [
 43 |             { name: 'Firefox', value: 45.0 },
 44 |             { name: 'IE', value: 26.8 },
 45 |             { name: 'Safari', value: 8.5 },
 46 |             { name: 'Opera', value: 6.2 },
 47 |             { name: '其他', value: 0.7 }];
 48 | 
 49 |         //var opt3 = MyECharts.ChartOptionTemplates.Pie('浏览器占比例', '%', data3);
 50 |         //MyECharts.RenderChart(opt3, 'container3');
 51 | 
 52 | 
 53 |         var dataAll = [
 54 |         [
 55 |             [10.0, 8.04],
 56 |             [8.0, 6.95],
 57 |             [13.0, 7.58],
 58 |             [9.0, 8.81],
 59 |             [11.0, 8.33],
 60 |             [14.0, 9.96],
 61 |             [6.0, 7.24],
 62 |             [4.0, 4.26],
 63 |             [12.0, 10.84],
 64 |             [7.0, 4.82],
 65 |             [5.0, 5.68]
 66 |         ],
 67 |         [
 68 |             [10.0, 9.14],
 69 |             [8.0, 8.14],
 70 |             [13.0, 8.74],
 71 |             [9.0, 8.77],
 72 |             [11.0, 9.26],
 73 |             [14.0, 8.10],
 74 |             [6.0, 6.13],
 75 |             [4.0, 3.10],
 76 |             [12.0, 9.13],
 77 |             [7.0, 7.26],
 78 |             [5.0, 4.74]
 79 |         ],
 80 |         [
 81 |             [10.0, 7.46],
 82 |             [8.0, 6.77],
 83 |             [13.0, 12.74],
 84 |             [9.0, 7.11],
 85 |             [11.0, 7.81],
 86 |             [14.0, 8.84],
 87 |             [6.0, 6.08],
 88 |             [4.0, 5.39],
 89 |             [12.0, 8.15],
 90 |             [7.0, 6.42],
 91 |             [5.0, 5.73]
 92 |         ],
 93 |         [
 94 |             [8.0, 6.58],
 95 |             [8.0, 5.76],
 96 |             [8.0, 7.71],
 97 |             [8.0, 8.84],
 98 |             [8.0, 8.47],
 99 |             [8.0, 7.04],
100 |             [8.0, 5.25],
101 |             [19.0, 12.50],
102 |             [8.0, 5.56],
103 |             [8.0, 7.91],
104 |             [8.0, 6.89]
105 |         ]
106 |         ];
107 | 
108 |         //var opt4 = MyECharts.ChartOptionTemplates.Scatter('Anscombe\'s quartet', '', dataAll);
109 |         //MyECharts.RenderChart(opt4, 'container4');
110 |     </script>
111 | </body>
112 | 


--------------------------------------------------------------------------------
/readme.txt:
--------------------------------------------------------------------------------
1 | 说明：
2 | 1、使用ECharts可以实现各种图形展示，但是每个图形都需要写大量重复的js代码，复用性不高，所以对Echarts进封装，方便使用。
3 | 


--------------------------------------------------------------------------------