导入echarts图表的步骤和实例
作者：互联网
一、定义容器变量并获取页面div元素
1 var chartDom = document.getElementById('chart3');
二、初始化容器
1 var myChart = echarts.init(chartDom);
三、通过option变量编辑图表
1 var option;
四、完整的echarts柱状图饼状图js代码
1 var chartDom = document.getElementById('chart3');
2 var myChart = echarts.init(chartDom);
3 var option;
4 var successdata;
5 var dataMap = {};
6 //给中间的图添加数据
7 $.ajax({
8 url:"/get_x",
9 success: function(data) {
10 successdata=data.data
11 console.log(successdata[1])
12 console.log("9-1 name : "+successdata[0][0][0])
13 console.log("9-1 cnt : "+successdata[0][0][1])
14 console.log("9-1 round : "+successdata[0][0][2])
15 //数量
16 dataMap.dataCnt = dataFormatter({
17 2002:successdata[0][0][1],
18 2003:successdata[0][1][1],
19 2004:successdata[0][2][1],
20 2005:successdata[0][3][1],
21 2006:successdata[0][4][1],
22 2007:successdata[0][5][1],
23 2008:successdata[0][6][1],
24 2009:successdata[0][7][1],
25 2010:successdata[0][8][1],
26 2011:successdata[0][9][1],
27 2012:successdata[0][10][1],
28 2013:successdata[0][11][1],
29 2014:successdata[0][12][1],
30 2015:successdata[0][13][1],
31 2016:successdata[0][14][1],
32 })
33 //金额
34 dataMap.dataRound=dataFormatter({
35 2002:successdata[0][0][2],
36 2003:successdata[0][1][2],
37 2004:successdata[0][2][2],
38 2005:successdata[0][3][2],
39 2006:successdata[0][4][2],
40 2007:successdata[0][5][2],
41 2008:successdata[0][6][2],
42 2009:successdata[0][7][2],
43 2010:successdata[0][8][2],
44 2011:successdata[0][9][2],
45 2012:successdata[0][10][2],
46 2013:successdata[0][11][2],
47 2014:successdata[0][12][2],
48 2015:successdata[0][13][2],
49 2016:successdata[0][14][2],
50 })
51 //x轴赋值
52 dataMap.dataX=dataFormatter({
53 2002:successdata[0][0][0],
54 2003:successdata[0][1][0],
55 2004:successdata[0][2][0],
56 2005:successdata[0][3][0],
57 2006:successdata[0][4][0],
58 2007:successdata[0][5][0],
59 2008:successdata[0][6][0],
60 2009:successdata[0][7][0],
61 2010:successdata[0][8][0],
62 2011:successdata[0][9][0],
63 2012:successdata[0][10][0],
64 2013:successdata[0][11][0],
65 2014:successdata[0][12][0],
66 2015:successdata[0][13][0],
67 2016:successdata[0][14][0],
68 })
69 //option里包含了baseOption和options 其中baseOption 是图的基础设置，options是数据的赋值
70 option = {
71 baseOption: {
72 timeline: {
73 axisType: 'category',
74 // realtime: false,
75 // loop: false,
76 autoPlay: true,
77 // currentIndex: 2,
78 playInterval: 1700,
79 // controlStyle: {
80 // position: 'left'
81 // },
82 //这里是最下面的时间线
83 data: [
84 '2021-09-01',
85 '2021-09-02',
86 '2021-09-03',
87 {
88 value: '2021-09-04',
89 tooltip: {
90 formatter: '{b}'
91 },
92 symbol: 'diamond',
93 symbolSize: 16
94 },
95 '2021-09-05',
96 '2021-09-06',
97 '2021-09-07',
98 '2021-09-08',
99 '2021-09-09',
100 {
101 value: '2021-09-10',
102 tooltip: {
103 formatter: function (params) {
104 return params.name + '';
105 }
106 },
107 symbol: 'diamond',
108 symbolSize: 18
109 },
110 '2021-09-11',
111 '2021-09-12',
112 '2021-09-13',
113 '2021-09-14',
114 '2021-09-15',
115 ],
116 label: {
117 formatter: function (s) {
118 return new Date(s).getFullYear();
119 }
120 }
121 },
122 title: {
123 subtext: '--------------'
124 },
125 tooltip: {},
126 //柱状图以及饼图对应data名字的颜色 color
127 color:['#FFD700','cyan'],
128 legend: {
129 left: 'right',
130 data: ['销量', '金额'],
131 selected: {
132 销量:true,
133 金额:true
134 }
135 },
136 calculable: true,
137 grid: {
138 top: 80,
139 bottom: 100,
140 tooltip: {
141 trigger: 'axis',
142 axisPointer: {
143 type: 'shadow',
144 label: {
145 show: true,
146 formatter: function (params) {
147 return params.value.replace('\n', '');
148 }
149 }
150 }
151 }
152 },
153 xAxis: [
154 {
155 type: 'category',
156 axisLabel: { interval: 0 },
157 data: [],
158 splitLine: { show: false }
159 }
160 ],
161 yAxis: [
162 {
163 type: 'value',
164 name: '销量/金额',
165 axisLabel : {
166 formatter: '{value}',
167 textStyle: {
168 color: '#acdce3'
169 }
170 }
171 }
172 ],
173 series: [
174 //具体的bar属性和饼图属性 给图初始化 图例外观等等 这里的name和上面legend保持一致
175 { name: '销量', type: 'bar' },
176 { name: '金额', type: 'bar' },
177 {
178 name: 'GDP占比',
179 type: 'pie',
180 center: ['70%', '23%'],
181 radius: '23%',
182 z: 100
183 }
184 ]
185 },
186 options: [
187 {
188 title: {
189 text: '2021-9-1',
190 textStyle:{
191 color:'#9aeae7'
192 }
193 },
194 series: [
195 { data: dataMap.dataCnt[2002] },
196 { data: dataMap.dataRound[2002] },
197 {
198 data: [
199 { name: '销量', value: dataMap.dataCnt['2002sum'] },
200 { name: '金额', value: dataMap.dataRound['2002sum'] },
201 ]
202 }
203 ],
204 xAxis: [
205 {
206 type: 'category',
207 axisLabel: {
208 interval: 2,
209 show: true,
210 textStyle: {
211 color: '#acdce3'
212 }
213 },
214 data: dataMap.dataX[2002],
215 splitLine: { show: false },
216 },
217 ]
218 },
219 {
220 title: {
221 text: '2021-9-2',
222 textStyle:{
223 color:'#9aeae7'
224 }
225 },
226 series: [
227 { data: dataMap.dataCnt[2003] },
228 { data: dataMap.dataRound[2003] },
229 {
230 data: [
231 { name: '销量', value: dataMap.dataCnt['2003sum'] },
232 { name: '金额', value: dataMap.dataRound['2003sum'] },
233 ]
234 }
235 ],
236 xAxis: [
237 {
238 type: 'category',
239 axisLabel: {
240 interval: 2,
241 show: true,
242 textStyle: {
243 color: '#acdce3'
244 }
245 },
246 data: dataMap.dataX[2003],
247 splitLine: { show: false },
248 }
249 ]
250 },
251 {
252 title: {
253 text: '2021-9-3',
254 textStyle:{
255 color:'#9aeae7'
256 }
257 },
258 series: [
259 { data: dataMap.dataCnt[2004] },
260 { data: dataMap.dataRound[2004] },
261 {
262 data: [
263 { name: '销量', value: dataMap.dataCnt['2004sum'] },
264 { name: '金额', value: dataMap.dataRound['2004sum'] },
265 ]
266 }
267 ],
268 xAxis: [
269 {
270 type: 'category',
271 axisLabel: {
272 interval: 2,
273 show: true,
274 textStyle: {
275 color: '#acdce3'
276 }
277 },
278 data: dataMap.dataX[2004],
279 splitLine: { show: false },
280 }
281 ]
282 },
283 {
284 title: {
285 text: '2021-9-4',
286 textStyle:{
287 color:'#9aeae7'
288 }
289 },
290 series: [
291 { data: dataMap.dataCnt[2005] },
292 { data: dataMap.dataRound[2005] },
293 {
294 data: [
295 { name: '销量', value: dataMap.dataCnt['2005sum'] },
296 { name: '金额', value: dataMap.dataRound['2005sum'] },
297 ]
298 }
299 ],
300 xAxis: [
301 {
302 type: 'category',
303 axisLabel: {
304 interval: 2,
305 show: true,
306 textStyle: {
307 color: '#acdce3'
308 }
309 },
310 data: dataMap.dataX[2005],
311 splitLine: { show: false },
312 }
313 ]
314 },
315 {
316 title: {
317 text: '2021-9-5',
318 textStyle:{
319 color:'#9aeae7'
320 }
321 },
322 series: [
323 { data: dataMap.dataCnt[2006] },
324 { data: dataMap.dataRound[2006] },
325 {
326 data: [
327 { name: '销量', value: dataMap.dataCnt['2006sum'] },
328 { name: '金额', value: dataMap.dataRound['2006sum'] },
329 ]
330 }
331 ],
332 xAxis: [
333 {
334 type: 'category',
335 axisLabel: {
336 interval: 2,
337 show: true,
338 textStyle: {
339 color: '#acdce3'
340 }
341 },
342 data: dataMap.dataX[2006],
343 splitLine: { show: false },
344 }
345 ]
346 },
347 {
348 title: {
349 text: '2021-9-6',
350 textStyle:{
351 color:'#9aeae7'
352 }
353 },
354 series: [
355 { data: dataMap.dataCnt[2007] },
356 { data: dataMap.dataRound[2007] },
357 {
358 data: [
359 { name: '销量', value: dataMap.dataCnt['2007sum'] },
360 { name: '金额', value: dataMap.dataRound['2007sum'] },
361 ]
362 }
363 ],
364 xAxis: [
365 {
366 type: 'category',
367 axisLabel: {
368 interval: 2,
369 show: true,
370 textStyle: {
371 color: '#acdce3'
372 }
373 },
374 data: dataMap.dataX[2007],
375 splitLine: { show: false },
376
377 }
378 ]
379 },
380 {
381 title: {
382 text: '2021-9-7',
383 textStyle:{
384 color:'#9aeae7'
385 }
386 },
387 series: [
388 { data: dataMap.dataCnt[2008] },
389 { data: dataMap.dataRound[2008] },
390 {
391 data: [
392 { name: '销量', value: dataMap.dataCnt['2008sum'] },
393 { name: '金额', value: dataMap.dataRound['2008sum'] },
394 ]
395 }
396 ],
397 xAxis: [
398 {
399 type: 'category',
400 axisLabel: {
401 interval: 2,
402 show: true,
403 textStyle: {
404 color: '#acdce3'
405 }
406 },
407 data: dataMap.dataX[2008],
408 splitLine: { show: false }
409 }
410 ]
411 },
412 {
413 title: {
414 text: '2021-9-8',
415 textStyle:{
416 color:'#9aeae7'
417 }
418 },
419 series: [
420 { data: dataMap.dataCnt[2009] },
421 { data: dataMap.dataRound[2009] },
422 {
423 data: [
424 { name: '销量', value: dataMap.dataCnt['2009sum'] },
425 { name: '金额', value: dataMap.dataRound['2009sum'] },
426 ]
427 }
428 ],
429 xAxis: [
430 {
431 type: 'category',
432 axisLabel: {
433 interval: 2,
434 show: true,
435 textStyle: {
436 color: '#acdce3'
437 }
438 },
439 data: dataMap.dataX[2009],
440 splitLine: { show: false }
441 }
442 ]
443 },
444 {
445 title: {
446 text: '2021-9-9',
447 textStyle:{
448 color:'#9aeae7'
449 }
450 },
451 series: [
452 { data: dataMap.dataCnt[2010] },
453 { data: dataMap.dataRound[2010] },
454 {
455 data: [
456 { name: '销量', value: dataMap.dataCnt['2010sum'] },
457 { name: '金额', value: dataMap.dataRound['2010sum'] },
458 ]
459 }
460 ],
461 xAxis: [
462 {
463 type: 'category',
464 axisLabel: {
465 interval: 2,
466 show: true,
467 textStyle: {
468 color: '#acdce3'
469 }
470 },
471 data: dataMap.dataX[2010],
472 splitLine: { show: false }
473 }
474 ]
475 },
476 {
477 title: {
478 title: {
479 text: '2021-9-10',
480 textStyle:{
481 color:'#9aeae7'
482 }
483 },
484 textStyle:{
485 color:'#9aeae7'
486 }
487 },
488 series: [
489 { data: dataMap.dataCnt[2011] },
490 { data: dataMap.dataRound[2011] },
491 {
492 data: [
493 { name: '销量', value: dataMap.dataCnt['2011sum'] },
494 { name: '金额', value: dataMap.dataRound['2011sum'] },
495 ]
496 }
497 ],
498 xAxis: [
499 {
500 type: 'category',
501 axisLabel: {
502 interval: 2,
503 show: true,
504 textStyle: {
505 color: '#acdce3'
506 }
507 },
508 data: dataMap.dataX[2011],
509 splitLine: { show: false }
510 }
511 ]
512 },
513 {
514 title: {
515 text: '2021-9-11',
516 textStyle:{
517 color:'#9aeae7'
518 }
519 },
520 series: [
521 { data: dataMap.dataCnt[2012] },
522 { data: dataMap.dataRound[2012] },
523 {
524 data: [
525 { name: '销量', value: dataMap.dataCnt['2012sum'] },
526 { name: '金额', value: dataMap.dataRound['2012sum'] },
527 ]
528 }
529 ],
530 xAxis: [
531 {
532 type: 'category',
533 axisLabel: {
534 interval: 2,
535 show: true,
536 textStyle: {
537 color: '#acdce3'
538 }
539 },
540 data: dataMap.dataX[2012],
541 splitLine: { show: false }
542 }
543 ]
544 },
545 {
546 title: {
547 text: '2021-9-12',
548 textStyle:{
549 color:'#9aeae7'
550 }
551 },
552 series: [
553 { data: dataMap.dataCnt[2013] },
554 { data: dataMap.dataRound[2013] },
555 {
556 data: [
557 { name: '销量', value: dataMap.dataCnt['2013sum'] },
558 { name: '金额', value: dataMap.dataRound['2013sum'] },
559 ]
560 }
561 ],
562 xAxis: [
563 {
564 type: 'category',
565 axisLabel: {
566 interval: 2,
567 show: true,
568 textStyle: {
569 color: '#acdce3'
570 }
571 },
572 data: dataMap.dataX[2013],
573 splitLine: { show: false }
574 }
575 ]
576 },
577 {
578 title: {
579 text: '2021-9-13',
580 textStyle:{
581 color:'#9aeae7'
582 }
583 },
584 series: [
585 { data: dataMap.dataCnt[2014] },
586 { data: dataMap.dataRound[2014] },
587 {
588 data: [
589 { name: '销量', value: dataMap.dataCnt['2014sum'] },
590 { name: '金额', value: dataMap.dataRound['2014sum'] },
591 ]
592 }
593 ],
594 xAxis: [
595 {
596 type: 'category',
597 axisLabel: {
598 interval: 2,
599 show: true,
600 textStyle: {
601 color: '#acdce3'
602 }
603 },
604 data: dataMap.dataX[2014],
605 splitLine: { show: false }
606 }
607 ]
608 },
609 {
610 title: {
611 text: '2021-9-14',
612 textStyle:{
613 color:'#9aeae7'
614 }
615 },
616 series: [
617 { data: dataMap.dataCnt[2015] },
618 { data: dataMap.dataRound[2015] },
619 {
620 data: [
621 { name: '销量', value: dataMap.dataCnt['2014sum'] },
622 { name: '金额', value: dataMap.dataRound['2014sum'] },
623 ]
624 }
625 ],
626 xAxis: [
627 {
628 type: 'category',
629 axisLabel: {
630 interval: 2,
631 show: true,
632 textStyle: {
633 color: '#acdce3'
634 }
635 },
636 data: dataMap.dataX[2015],
637 splitLine: { show: false }
638 }
639 ]
640 },
641 {
642 title: {
643 text: '2021-9-15',
644 textStyle:{
645 color:'#9aeae7'
646 }
647 },
648 series: [
649 { data: dataMap.dataCnt[2016] },
650 { data: dataMap.dataRound[2016] },
651 {
652 data: [
653 { name: '销量', value: dataMap.dataCnt['2016sum'] },
654 { name: '金额', value: dataMap.dataRound['2016sum'] },
655 ]
656 }
657 ],
658 xAxis: [
659 {
660 type: 'category',
661 axisLabel: {
662 interval: 2,
663 show: true,
664 textStyle: {
665 color: '#acdce3'
666 }
667 },
668 data: dataMap.dataX[2016],
669 splitLine: { show: false }
670 }
671 ]
672 },
673 ]
674 };
675 option && myChart.setOption(option);
676 },
677 error: function(xhr, type, errorThrown) {
678
679 }
680 })
681 function dataFormatter(obj) {
682 // prettier-ignore
683 var pList = [''];
684 // console.log(pList[0])
685 var temp;
686 for (var year = 2002; year <= 2016; year++) {
687 var max = 0;
688 var sum = 0;
689 temp = obj[year];
690 for (var i = 0, l = temp.length; i < l; i++) {
691 max = Math.max(max, temp[i]);
692 sum += temp[i];
693 obj[year][i] = {
694 name: pList[i],
695 value: temp[i]
696 };
697 }
698 obj[year + 'max'] = Math.floor(max / 100) * 100;
699 obj[year + 'sum'] = sum;
700 }
701 return obj;
702 }
标签：name,实例,color,value,dataMap,successdata,导入,data,echarts 来源： https://www.cnblogs.com/rainbow-1/p/15370378.html