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 }
Echarts入门案例教程的更多相关文章
- Spring Boot 集成 Spring Security 入门案例教程
前言 本文作为入门级的DEMO,完全按照官网实例演示: 项目目录结构 Maven 依赖 <parent> <groupId>org.springframework.boot&l ...
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- [转载]HTML5开发入门经典教程和案例合集（含视频教程）
http://www.iteye.com/topic/1132555 HTML5作为下一代网页语言,对Web开发者而言,是一门必修课.本文档收集了多个HTML5经典技术文档(HTML5入门资料.经典) ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 入门案例分析 在第一章里,我们已经对ArcGIS系列软件的体系结构有了一 ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- ASP.NET MVC案例教程（一） 准备
ASP.NET MVC案例教程(一) 前言 ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可以说自动推出以来,一直广受关注.在经历了漫长的Preview之后,前几天终于推出了其 ...
- Mybatis基础及入门案例
这几天正在对SSM框架的知识进行一个回顾加深,有很多东西学的囫囵吞枣,所以利用一些时间进一步的学习.首先大概了解一下mybatis的使用,再通过一个案例来学习它. 什么是MyBatis Mybatis ...
- Part1-HttpClient快速入门案例
前言 最近这段时间在学习爬虫方面的知识,接触了几个优秀的爬虫框架,也爬取了一些自己喜欢网站的信息.通过官网学习HttpClient的过程中,希望通过写此博客来巩固自己的学习,也为有需要的人提供学习帮助 ...
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
随机推荐
- 我的小程序之旅八：基于weixin-java-mp实现微信公众号被动回复消息
在微信里有这样一个公众号[华为运动健康],当点击最新排行的时候,公众号就会发送今天最新的运动步数给你.如下图: 这里有两种格式的消息 1.有头像框,有聊天框--普通消息 2.消息有样式.颜色等--模板 ...
- 面试官：你知道Comparable 和 Comparator 的区别吗？我：巴拉巴拉
写在开头 面试官:"我们在Java的集合和数据结构中都离不开比较器,请你聊一聊Comparable 和 Comparator 这两种的区别吧" 内心活动:"上来就这么直接 ...
- 解决 Order By 将字符串类型的数字 或 字符串中含数字 按数字排序问题
oracle数据库,字段是varchar2类型即string,而其实存的是数字,这时候不加处理的order by的排序结果,肯定有问题解决办法: (1)cast( 要排序的字 ...
- 【华为机试ACM基础#02】从单向链表中删除指定值的节点、输出单向链表中倒数第k个节点（熟悉链表的输入方式）
从单向链表中删除指定值的节点 输入一个单向链表和一个节点的值,从单向链表中删除等于该值的节点,删除后如果链表中无节点则返回空指针. 链表的值不能重复. 构造过程,例如输入一行数据为: 6 2 1 2 ...
- 浅谈 rxgo 在项目中的使用方式
项目中使用到了 RxGo ,感觉现有的处理方式有一定的优势,当然也有一定的有劣势,遂记录下来,免得自己忘记. 本文介绍的只是 rxgo 的一种方式而已,如果你有不错的使用方式,请不吝赐教,谢谢. 对 ...
- 用Docker发布Study.BlazorOne.Blazor到公网测试服务器
# 1.准备公网上的测试数据库. 之前我们在Visual Studio里面调试的时候,使用的都是localhost的数据库.现在需要在公网上准备一个SQL Server.然后执行下面的步骤 1)把St ...
- 【Azure 环境】IntelliJ IDEA Community Edition 2021.2.3登陆Azure账号时，无法切换到中国区
问题描述 在IntelliJ IDEA Community Edition 2021.2.3中开发Azure Function程序,最后准备部署到中国区 Azure Function中.如下,在Int ...
- 如何提高UI自动化稳定性？
1尽量使用相对路径的xpath表达式定位元素 2查找元素优先使用显示等待方式 3用例与用例之间避免产生依赖,用例可以单独运行 4用例执行结束之后要对测试场景进行还原,避免影响到其他用例的执行 5脚本执 ...
- 摆脱鼠标系列 - vscode 单词自动翻译 快捷键 Alt + Z
为什么 摆脱鼠标系列 - vscode 单词自动翻译 快捷键 Alt + Z 单词函数 省得每次都查字典了 插件名称 translate speaker 翻译朗读者API 截图
- Spring 中不得不了解的姿势
说明 本文非原创,我只是进行了整理以及做了一些改动,仅供学习,若需进行商业使用,请联系原作者 原作者:苏三 原文链接:苏三说技术:Spring系列 Spring IOC 本章节解读的流程为Spring ...