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 ...
随机推荐
- leetcode - 相同的树
给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入:p = [1,2,3], q = [1 ...
- React Native如何每次唤醒APP都执行一段代码
最近想要做一个类似于淘宝每次打开会根据用户剪贴板内容弹出对应商品的功能.要完成这个功能需要每次唤醒APP都读取一次剪贴板. 1.监听 && 销毁 1 async componentDi ...
- 【Azure App Services】多次操作App Service伸缩实例遇见限制操作记录
问题描述 多次操作App Services,进行实例数的变化.达到限制后遇见报错: 错误的具体描述为: { "status": "Failed", " ...
- 使用grafana+Prometheus监控时PromQL内置函数详解
1.Prometheus简介 Prometheus(中文名:普罗米修斯)是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB). Prometheus使用Go语言开发, 是Googl ...
- mysql-查询库中所有表名称或者某一张表的所有字段名称
-- 查询某一库中所有表的名称, SELECT a.TABLE_SCHEMA ,a.TABLE_NAME ,a.TABLE_COMMENT FROM information_schema.TABLES ...
- C++ //类模板对象做函数参数 //三种方式 //1.指定传入的类型 --直接显示对象的数据类型 //2.参数模板化 --将对象中的参数变为模板进行传递 //3.整个类模板化 --将这个对象类型 模板化进行传递
1 //类模板对象做函数参数 2 //三种方式 3 //1.指定传入的类型 --直接显示对象的数据类型 4 //2.参数模板化 --将对象中的参数变为模板进行传递 5 //3.整个类模板化 --将这个 ...
- RPA能否创造新业态?如何优化组织结构?如何助力疫情中的企业?
RPA能否创造新业态?如何优化组织结构?如何助力疫情中的企业? 从<爱,死亡和机器人>探讨强人工智能时代的RPA发展 文/王吉伟 本周四,王吉伟频道参加了私域流量社群的一个直播活动. 活动 ...
- Java面试必考题之线程的生命周期，结合源码，透彻讲解!
写在开头 在前面的几篇博客里,我们学习了Java的多线程,包括线程的作用.创建方式.重要性等,那么今天我们就要正式踏入线程,去学习更加深层次的知识点了. 第一个需要学的就是线程的生命周期,也可以将之理 ...
- translate speaker 翻译朗读者API - vscode 插件推荐 单词发音
translate speaker 翻译朗读者API - vscode 插件推荐 单词发音 有个小bug,就是发音发两次,改个配置就好了. "translateSpeaker.mode&qu ...
- Multi-Runtime多运行时架构
概念 Multi-Runtime Multi-Runtime 是一种服务端架构思路,把应用里的所有中间件挪到 Sidecar 里,使得"业务运行时"和"技术运行时&quo ...