echarts入门教程（超级详细带案例）

一.echarts的介绍

1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2.学习一项技术的关键，还是必要多读官方文档，官网链接Apache ECharts,与之雷同的图表库还有D3，HeightCharts。
3.echarts的下载
（1）从 npm 获取
npm install echarts --save
（2）从 CDN 获取
（3）从 GitHub 获取
二.echarts语法

一.echarts常见术语

英文汉语title标题legend图例tooltip提示xAxisx轴线yAxisy轴线series系列data数据 二.图表常见类型

• bar 柱状图
  
• line折线图
  (1)曲线图
  加上smooth:true;就会变成曲线图
  (2)面积图
  加上areaStyle:{fill:“#f70”} 会变成面积图
  
• pie 饼形图
  （1）加上radius:[80,50] 会变成环形图
  

三.echarts 中的样式简介

• 颜色主题
  （1）主题可以通过切换深色模式，直接看到采用主题的结果
  

• 通过light 、dark切换
  
• 定制主题，具体可以参考官网，必要导入下载的js文件
  

1. // HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
2. var chart = echarts.init(dom, 'vintage');
3. // ...

复制代码

（2）color调色盘
在 option 中设置。可以设置全局的调色盘，也可以设置系列本身专属的调色盘。
全局调色盘option.color

1. option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]

复制代码

局部调色盘series.item.color

1. series: [
2.     {
3.       type: 'bar',
4.       // 此系列自己的调色盘。
5.       color: [
6.         '#dd6b66',
7.         '#759aa0',
8.         '#e69d87',
9.         '#8dc1a9',
10.         '#ea7e53',
11.         '#eedd78',
12.         '#73a373',
13.         '#73b9bc',
14.         '#7289ab',
15.         '#91ca8c',
16.         '#f49f42'
17.       ]
18.      
19.     },

复制代码

（3）itemStyle项的颜色

• itemStyle:{color:“#00f” }
  
• 高亮的样式emphasis
  

1. itemStyle:{
2. normal:{color:"#93da6c"},
3. emphasis:{color:"#bcff57"}
4. }

复制代码

• 特殊样式
  渐变色
  （1）定义渐变
  

1. // 定义渐变
2.         var linear = {
3.           type: 'linear',
4.           x: 0,
5.           y: 0,
6.           x2: 0,
7.           y2:1,
8.           colorStops: [{
9.                   offset: 0, color: '#02bcff' // 0% 处的颜色
10.           }, {
11.                   offset: 1, color: '#5555ff' // 100% 处的颜色
12.           }],
13.           global: false // 缺省为 false
14.         }

复制代码

（2）利用渐变

1. itemStyle:{
2.         color:linear,
3.         borderRadius:[30,30,0,0]
4.                 }

复制代码

• label标签
  

• show：true是否显示
  
• position：”insideRight“位置
  
• formatter格式
  formatter: “{a}\n{c}分”
  {a}系列名
  {b}数据名
  {c}数值
  {d}百分百
  
• rich富文本
  

1. series:[                               
2. {type:"pie",radius:[200,110],data:[
3. {name:"百度",value:1200,
4. label:{show:true,
5. position:"center",
6. // {d}百分比 {big|内容} 使用样式
7. formatter:"{big|{d}}{small|%}\n{b}",
8. // 定义样式（富文本）
9. rich:{
10.         big:{
11.                 color:"#f70",
12.                 fontSize:"48px",
13.                 fontWeight:900,
14.                 },
15.         small:{                                                                                        color:"#f70"
16.                 }
17.                 }
18.                 }},
19. {name:"其他",value:360,
20. // 样式灰色
21. itemStyle:{color:"#ccc"},
22. // 标签不显示
23. label:{show:false},
24. // 提示不显示
25. tooltip:{show:false}}
26.                                         ]}
27.                                 ]
28.                                  
29.                         }

复制代码

四.动态显示局部

• 定义option
  
• 修改option值
  
• echart.setOption(option);更新数据和视图
  

五.缓动动画

1. 动画延迟animationDelay
2. 动画时长animationDuration,
3. 动画缓动函数animationEasing

复制代码

1. animationDelay: function(idx) {
2.                                         // 越往后的数据延迟越大
3.                                         return idx * 200;
4.                                 },
5.                                 animationDuration: function(idx) {
6.                                         // 每小格动画的时候
7.                                         return idx * 200;
8.                                 },
9.                                 // 弹性的方式出现动画
10.                                 animationEasing: "bounceInOut"
11.                         }

复制代码

六.事件

• 事件的监听
  echart.on（”事件名“，处置惩罚函数）
  
• 发送事件
  dispatchAction
  

1. echart.dispatchAction({
2.         type: 'showTip',
3. // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
4.         seriesIndex: 0,
5. // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
6.         dataIndex: ind,
7. // 可选，数据项名称，在有 dataIndex 的时候忽略                                 
8.         position:"top",
9.                                 })

复制代码

三.echarts应用

实践出真知，学过前面的语法，快来创建属于本身的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。

• 案例1
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <!-- 01 导入js -->
7.                 <script src="js/echarts.min.js"></script>
8.                 <!-- 03 设置容器的样式 -->
9.                 <style>
10.                         #container{
11.                                 width: 800px;
12.                                 height: 600px;
13.                         }
14.                 </style>
15.         </head>
16.         <body>
17.                 <!-- 02 创建个容器 -->
18.                 <div id="container"></div>
19.         </body>
20.         <script>
21.                 //04 实例化echarts
22.                 // 4.1 创建一个实例
23.                 var echart = echarts.init(document.getElementById("container"))
24.                 // 4.2 定义配置项
25.                 var option = {
26.                         // 图表的标题
27.                         title:{
28.                                 text:"我的第一个图表"
29.                         },
30.                         // 图表的提示
31.                         tooltip:{},
32.                         // 图例
33.                         legend:{data:["睡眠时长"]},
34.                         // x轴线
35.                         xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
36.                         // y轴线
37.                         yAxis:{},
38.                         // 设置数据
39.                         series:[
40.                                 {
41.                                         // 数据名称
42.                                         name:"睡眠时长",
43.                                         // 类型为柱状图
44.                                         type:"bar",
45.                                         // 数据data
46.                                         data:[8,10,4,5,9,4,8]
47.                                         }
48.                         ]
49.                 }
50.                 // 4.3 更新配置
51.                 echart.setOption(option);
52.                 // chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线
53.                 // legend传奇（图例） tooltip 提示 init初始化 document文档
54.         </script>
55. </html>

复制代码

• 案例2
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <!-- 01 导入js -->
7.                 <script src="js/echarts.min.js"></script>
8.                 <!-- 03 设置容器的样式 -->
9.                 <style>
10.                         #container{
11.                                 width: 800px;
12.                                 height: 600px;
13.                         }
14.                 </style>
15.         </head>
16.         <body>
17.                 <!-- 02 创建个容器 -->
18.                 <div id="container"></div>
19.         </body>
20.         <script>
21.                 //04 实例化echarts
22.                 // 4.1 创建一个实例
23.                 var echart = echarts.init(document.getElementById("container"))
24.                 // 4.2 定义配置项
25.                 var option = {
26.                         // 图表的标题
27.                         title:{
28.                                 text:"我的第一个图表"
29.                         },
30.                         // 图表的提示
31.                         tooltip:{},
32.                         // 图例
33.                         legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
34.                         // x轴线
35.                         xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
36.                         // y轴线
37.                         yAxis:{},
38.                         // 设置数据
39.                         series:[
40.                                 {
41.                                         // 数据名称
42.                                         name:"睡眠时长",
43.                                         // 类型为柱状图
44.                                         type:"bar",
45.                                         // 数据data
46.                                         data:[8,10,4,5,9,4,8]
47.                                 },
48.                                 {
49.                                         // 数据名称
50.                                         name:"玩游戏时长",
51.                                         // 类型为柱状图
52.                                         type:"line",
53.                                         // 数据data
54.                                         data:[2,4,1,5,6,8,5]
55.                                 },
56.                                 {
57.                                         // 数据名称
58.                                         name:"上课时长",
59.                                         // 类型为柱状图
60.                                         type:"line",
61.                                         smooth:true,
62.                                         // 数据data
63.                                         data:[6,7,5,8,6,1,0],
64.                                         areaStyle:"#f70"
65.                                 },
66.                                 {
67.                                         name:"成绩",
68.                                         // 饼形图
69.                                         type:"pie",
70.                                         // radius:80,
71.                                         // 半径
72.                                         radius:[80,50],
73.                                         // 位移
74.                                         left:-80,
75.                                         top:-270,
76.                                         // 数据
77.                                         data:[
78.                                                 {name:"js",value:90},
79.                                                 {name:"html",value:85},
80.                                                 {name:"jq",value:90},
81.                                                 {name:"vue",value:50},
82.                                         ]
83.                                 }
84.                         ]
85.                 }
86.                 // 4.3 更新配置
87.                 echart.setOption(option);
88.                 // chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线
89.                 // legend传奇（图例） tooltip 提示 init初始化 document文档
90.         </script>
91. </html>

复制代码

• 案例3
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <!-- 01 导入js -->
7.                 <script src="js/echarts.min.js"></script>
8.                 <!-- 03 设置容器的样式 -->
9.                 <script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
10.                 <style>
11.                         #container{
12.                                 width: 800px;
13.                                 height: 600px;
14.                         }
15.                 </style>
16.         </head>
17.         <body>
18.                 <!-- 02 创建个容器 -->
19.                 <div id="container"></div>
20.         </body>
21.         <script>
22.                 //04 实例化echarts
23.                 // 4.1 创建一个实例
24.                 var echart = echarts.init(document.getElementById("container"))
25.                 // 主题，light，dark，自定义
26.                 // var echart = echarts.init(document.getElementById("container"),'purple-passion')
27.                 // 4.2 定义配置项
28.                 var option = {
29.                         // 调色盘
30.                         // color:["#55aaff","#aaff7f","#55007f","#ffff00"],
31.                         // 图表的标题
32.                         title:{
33.                                 text:"我的第一个图表"
34.                         },
35.                         // 图表的提示
36.                         tooltip:{},
37.                         // 图例
38.                         legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
39.                         // x轴线
40.                         xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
41.                         // y轴线
42.                         yAxis:{},
43.                         // 设置数据
44.                         series:[
45.                                 {
46.                                         // 数据名称
47.                                         name:"睡眠时长",
48.                                         // 类型为柱状图
49.                                         type:"bar",
50.                                         // 数据data
51.                                         data:[8,10,4,5,9,4,8],
52.                                         color:["#ac4cff"]
53.                                 },
54.                                 {
55.                                         // 数据名称
56.                                         name:"玩游戏时长",
57.                                         // 类型为柱状图
58.                                         type:"line",
59.                                         // 数据data
60.                                         data:[2,4,1,5,6,8,5]
61.                                 },
62.                                 {
63.                                         // 数据名称
64.                                         name:"上课时长",
65.                                         // 类型为柱状图
66.                                         type:"line",
67.                                         smooth:true,
68.                                         // 数据data
69.                                         data:[6,7,5,8,6,1,0],
70.                                         // areaStyle:"#f70"
71.                                        
72.                                 },
73.                                 {
74.                                         name:"成绩",
75.                                         // 饼形图
76.                                         type:"pie",
77.                                         // radius:80,
78.                                         // 半径
79.                                         radius:[80,50],
80.                                         // 位移
81.                                         left:-80,
82.                                         top:-270,
83.                                         // 数据
84.                                         data:[
85.                                                 {name:"js",value:90},
86.                                                 {name:"html",value:85,itemStyle:{
87.                                                         color:"#ffaa00"
88.                                                 }},
89.                                                 {name:"jq",value:90,
90.                                                  itemStyle:{
91.                                                          normal:{color:"#93da6c"},
92.                                                          emphasis:{color:"#bcff57"}
93.                                                  }
94.                                                 },
95.                                                 {name:"vue",value:50},
96.                                         ]
97.                                 }
98.                         ]
99.                 }
100.                 // 4.3 更新配置
101.                 echart.setOption(option);
102.                 // chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线
103.                 // legend传奇（图例） tooltip 提示 init初始化 document文档
104.         </script>
105. </html>

复制代码

• 案例4
  
  
  
  

1. <!DOCTYPE html><html>        <head>                <meta charset="utf-8">                <title></title>                <!-- 01 导入js -->                <script src="js/echarts.min.js"></script>                <!-- 03 设置容器的样式 -->                <script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>                <style>                        #container{                                width: 800px;                                height: 600px;                        }                </style>        </head>        <body>                <!-- 02 创建个容器 -->                <div id="container"></div>        </body>        <script>        // 定义渐变
2.         var linear = {
3.           type: 'linear',
4.           x: 0,
5.           y: 0,
6.           x2: 0,
7.           y2:1,
8.           colorStops: [{
9.                   offset: 0, color: '#02bcff' // 0% 处的颜色
10.           }, {
11.                   offset: 1, color: '#5555ff' // 100% 处的颜色
12.           }],
13.           global: false // 缺省为 false
14.         }
15.                 //04 实例化echarts                // 4.1 创建一个实例                var echart = echarts.init(document.getElementById("container"))                // 主题，light，dark，自定义                // var echart = echarts.init(document.getElementById("container"),'purple-passion')                // 4.2 定义配置项                var option = {                        // 调色盘                        // color:["#55aaff","#aaff7f","#55007f","#ffff00"],                        // 图表的标题                        title:{                                text:"我的第一个图表"                        },                        // 图表的提示                        tooltip:{},                        // 图例                        legend:{data:["睡眠时长","玩游戏时长","上课时长"]},                        // x轴线                        xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},                        // y轴线                        yAxis:{},                        // 设置数据                        series:[                                {                                        // 数据名称                                        name:"睡眠时长",                                        // 类型为柱状图                                        type:"bar",                                        // 数据data                                        data:[8,10,4,5,9,4,8],                                        // color:["#ac4cff"]                                        itemStyle:{                                                color:linear,                                                borderRadius:[30,30,0,0]                                        }                                },                                {                                        // 数据名称                                        name:"玩游戏时长",                                        // 类型为柱状图                                        type:"line",                                        // 数据data                                        data:[2,4,1,5,6,8,5]                                },                                {                                        // 数据名称                                        name:"上课时长",                                        // 类型为柱状图                                        type:"line",                                        smooth:true,                                        // 数据data                                        data:[6,7,5,8,6,1,0],                                        // areaStyle:"#f70"                                                                        },                                {                                        name:"成绩",                                        // 饼形图                                        type:"pie",                                        // radius:80,                                        // 半径                                        radius:[80,50],                                        // 位移                                        left:-80,                                        top:-270,                                        // 数据                                        data:[                                                {name:"js",value:90},                                                {name:"html",value:85,itemStyle:{                                                        color:"#ffaa00"                                                }},                                                {name:"jq",value:90,                                                 itemStyle:{                                                         normal:{color:"#93da6c"},                                                         emphasis:{color:"#bcff57"}                                                 }                                                },                                                {name:"vue",value:50},                                        ]                                }                        ]                }                // 4.3 更新配置                echart.setOption(option);                // chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis程度轴线                 // legend传奇（图例） tooltip 提示 init初始化 document文档         </script></html>

复制代码

• 案例5
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <script src="js/echarts.min.js"></script>
7.                 <style>
8.                  #container{
9.                          width: 800px;
10.                          height: 600px;
11.                  }
12.                 </style>
13.         </head>
14.         <body>
15.                 <div id="container"></div>
16.                 <script>
17.                         var echart = echarts.init(document.getElementById("container"))
18.                         var option = {
19.                                 title:{text:"堆叠-小小-大大"},
20.                                 legend:{data:["小小","大大"]},
21.                                 // tooltip提示  trigger触发器 axis轴线触发，item 当前项触发
22.                                 tooltip:{trigger:"axis"},
23.                                 yAxis:{data:["vue","js","html"]},
24.                                 xAxis:{},
25.                                 series:[
26.                                         {name:"小小",type:"bar",data:[80,60,75],stack:true,
27.                                         // stack堆叠，label 标签，position位置，inside内部，right右侧，formmater格式
28.                                         // \n 代表换行，{a}系列名 "陈康" {b}数值名 "vue"  {c}数值  80
29.                                         label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},
30.                                         {name:"大大",type:"bar",data:[95,80,35],stack:true,
31.                                         label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}
32.                                 ]
33.                         }
34.                         echart.setOption(option);
35.                 </script>
36.         </body>
37. </html>

复制代码

• 案例6
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <script src="js/echarts.min.js"></script>
7.                 <style>
8.                  #container{
9.                          width: 800px;
10.                          height: 600px;
11.                  }
12.                 </style>
13.         </head>
14.         <body>
15.                 <div id="container"></div>
16.                 <script>
17.                         var echart = echarts.init(document.getElementById("container"))
18.                         var option = {
19.                                 title:{text:"堆叠-小小-大大"},
20.                                 toolbox: {
21.                                         // 显示工具箱
22.                                     show: true,
23.                                     feature: {
24.                                                 // 数据缩放
25.                                       dataZoom: {
26.                                         yAxisIndex: 'none'
27.                                       },
28.                                           // 数据视图只读
29.                                       dataView: { readOnly: false },
30.                                           // 魔法类型
31.                                       magicType: { type: ['line', 'bar'] },
32.                                           //  重置
33.                                       restore: {},
34.                                           // 保存图片
35.                                       saveAsImage: {}
36.                                     }
37.                                   },
38.                                 legend:{data:["小小","大大"]},
39.                                 // tooltip提示  trigger触发器 axis轴线触发，item 当前项触发
40.                                 tooltip:{trigger:"axis"},
41.                                 yAxis:{data:["vue","js","html"]},
42.                                 xAxis:{},
43.                                 series:[
44.                                         {name:"小小",type:"bar",data:[80,60,75],stack:true,
45.                                         // stack堆叠，label 标签，position位置，inside内部，right右侧，formmater格式
46.                                         // \n 代表换行，{a}系列名 "陈康" {b}数值名 "vue"  {c}数值  80
47.                                         label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},
48.                                         {name:"大大",type:"bar",data:[95,80,35],stack:true,
49.                                         label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}
50.                                 ]
51.                         }
52.                         echart.setOption(option);
53.                 </script>
54.         </body>
55. </html>

复制代码

• 案例7
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <script src="js/echarts.min.js"></script>
7.                 <style>
8.                  #container{
9.                          width: 800px;
10.                          height: 600px;
11.                  }
12.                 </style>
13.         </head>
14.         <body>
15.                 <div id="container"></div>
16.                 <script>
17.                         var echart = echarts.init(document.getElementById("container"))
18.                         var option = {
19.                                 title:{text:"网站访问来源"},
20.                                 legend:{data:["其他","百度"]},
21.                                 tooltip:{},
22.                                 series:[
23.                                         {type:"pie",radius:[200,110],data:[
24.                                                 {name:"百度",value:1200,label:{
25.                                                         show:true,
26.                                                         position:"center",
27.                                                         // {d}百分比 {big|内容} 使用样式
28.                                                         formatter:"{big|{d}}{small|%}\n{b}",
29.                                                         // 定义样式（富文本）
30.                                                         rich:{
31.                                                                 big:{
32.                                                                         color:"#f70",
33.                                                                         fontSize:"48px",
34.                                                                         fontWeight:900,
35.                                                                 },
36.                                                                 small:{
37.                                                                         color:"#f70"
38.                                                                 }
39.                                                         }
40.                                                 }},
41.                                                 {name:"其他",value:360,
42.                                                 // 样式灰色
43.                                                 itemStyle:{color:"#ccc"},
44.                                                 // 标签不显示
45.                                                 label:{show:false},
46.                                                 // 提示不显示
47.                                                 tooltip:{show:false}}
48.                                         ]}
49.                                 ]
50.                                  
51.                         }
52.                         echart.setOption(option);
53.                 </script>
54.         </body>
55. </html>

复制代码

• 案例8
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <script src="js/echarts.min.js"></script>
7.                 <style>
8.                  #container{
9.                          width: 1200px;
10.                          height: 600px;
11.                  }
12.                 </style>
13.         </head>
14.         <body>
15.                 <div id="container"></div>
16.                 <script type="text/javascript" src="./js/data.js">                       
17.                 </script>
18.                 <script>
19.                         console.log(data);
20.                         // sort排序，map映射，slice(-4)切割后四位
21.                         var  trends = data.data.trends.sort((a,b)=>a.day-b.day);
22.                         var echart = echarts.init(document.getElementById("container"))
23.                         var option = {
24.                                 title:{text:"新冠肺炎趋势"},
25.                                 legend:{data:["累计确诊"]},
26.                                 tooltip:{},
27.                                 yAxis:{},
28.                                 // slice(0,20),只显示前20条数据
29.                                 xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
30.                                 series:[{
31.                                         name:"累计确诊",
32.                                         type:"bar",
33.                                         // data:[{name:"",value:""}]
34.                                         data:trends.slice(0,20).map(item=>item.sure_cnt)
35.                                 }]                                 
36.                         }
37.                         // 每隔3秒执行一次move
38.                         var id = setInterval(move,3000);
39.                        
40.                         function move(){
41.                                 // 删除第一个
42.                                 var first = trends.shift();
43.                                 // 添加到最后
44.                                 trends.push(first);
45.                                 // 更新option
46.                                 option.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));
47.                                 option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);
48.                                 // 更新 图
49.                                 echart.setOption(option);
50.                         }
51.                         // 鼠标移入停止动画
52.                         echart.on("mouseover",function(){clearInterval(id)})
53.                         // 鼠标移出播放
54.                         echart.on("mouseout",function(){
55.                                 id = setInterval(move,3000);
56.                         })
57.                        
58.                         echart.setOption(option);
59.                 </script>
60.         </body>
61. </html>

复制代码

• 案例9
  
  
  
  

1. <!DOCTYPE html><html>        <head>                <meta charset="utf-8">                <title></title>                <script src="js/echarts.min.js"></script>                <style>                        #container {                                width: 1200px;                                height: 600px;                        }                </style>        </head>        <body>                <div id="container"></div>                <script type="text/javascript" src="./js/data.js">                </script>                <script>                        console.log(data);                        // sort排序，map映射，slice(-4)切割后四位                        var trends = data.data.trends.sort((a, b) => a.day - b.day);                        var echart = echarts.init(document.getElementById("container"))                        var option = {                                title: {                                        text: "新冠肺炎趋势"                                },                                legend: {                                        data: ["累计确诊"]                                },                                tooltip: {},                                yAxis: {},                                // slice(0,20),只显示前20条数据                                xAxis: {                                        data: trends.slice(0, 20).map(item => String(item.day).slice(-4))                                },                                series: [{                                        name: "累计确诊",                                        type: "bar",                                        // data:[{name:"",value:""}]                                        data: trends.slice(0, 20).map(item => item.sure_cnt)                                }],                                // 每个实行延迟的时候（idx就是下标，随着下标的增大延迟会长）                                animationDelay: function(idx) {
2.                                         // 越往后的数据延迟越大
3.                                         return idx * 200;
4.                                 },
5.                                 animationDuration: function(idx) {
6.                                         // 每小格动画的时候
7.                                         return idx * 200;
8.                                 },
9.                                 // 弹性的方式出现动画
10.                                 animationEasing: "bounceInOut"
11.                         }
12.                         // 每隔3秒实行一次move                        // var id = setInterval(move,3000);                        function move() {                                // 删除第一个                                var first = trends.shift();                                // 添加到最后                                trends.push(first);                                // 更新option                                option.xAxis.data = trends.slice(0, 20).map(item => String(item.day).slice(-4));                                option.series[0].data = trends.slice(0, 20).map(item => item.sure_cnt);                                // 更新 图                                echart.setOption(option);                        }                        // 鼠标移入制止动画                        echart.on("mouseover", function() {                                clearInterval(id)                        })                        // 鼠标移出播放                        echart.on("mouseout", function() {                                id = setInterval(move, 3000);                        })                        echart.setOption(option);                </script>        </body></html>

复制代码

• 案例10
  
  
  
  

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8">
5.                 <title></title>
6.                 <script src="js/echarts.min.js"></script>
7.                 <style>
8.                  #container{
9.                          width: 1200px;
10.                          height: 600px;
11.                  }
12.                 </style>
13.         </head>
14.         <body>
15.                 <div id="container"></div>
16.                 <script type="text/javascript" src="./js/data.js">                       
17.                 </script>
18.                 <script>
19.                         console.log(data);
20.                         // sort排序，map映射，slice(-4)切割后四位
21.                         var  trends = data.data.trends.sort((a,b)=>a.day-b.day);
22.                         var echart = echarts.init(document.getElementById("container"))
23.                         var option = {
24.                                 title:{text:"新冠肺炎趋势"},
25.                                 legend:{data:["累计确诊"]},
26.                                 tooltip:{},
27.                                 yAxis:{},
28.                                 // slice(0,20),只显示前20条数据
29.                                 xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
30.                                 series:[{
31.                                         name:"累计确诊",
32.                                         type:"bar",
33.                                         // data:[{name:"",value:""}]
34.                                         data:trends.slice(0,20).map(item=>item.sure_cnt)
35.                                 }],
36.                                 // 每个执行延迟的时候（idx就是下标，随着下标的增大延迟会长）
37.                                 animationDelay: function (idx) {
38.                                      // 越往后的数据延迟越大
39.                                      return idx * 100;
40.                                 },
41.                                 animationDuration:function(idx){
42.                                         // 每小格动画的时候
43.                                         return idx*100;
44.                                 },
45.                                 // 弹性的方式出现动画
46.                                 animationEasing:"bounceInOut"
47.                         }
48.                         // 每隔3秒移动一个
49.                         // 显示提示的下标
50.                         var ind = 0;
51.                         var id = setInterval(play,3000);
52.                         // 播放
53.                         function play(){
54.                                 // 发送一个显示提示的动作
55.                                 echart.dispatchAction({
56.                                         type: 'showTip',
57.                                         // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
58.                                         seriesIndex: 0,
59.                                         // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
60.                                         dataIndex: ind,
61.                                         // 可选，数据项名称，在有 dataIndex 的时候忽略
62.                                          
63.                                         position:"top",
64.                                 })
65.                                 // 让ind加1
66.                                 ind++;
67.                                 // 大于20就归0
68.                                 if(ind>=20){
69.                                         ind=0;
70.                                 }
71.                         }
72.                        
73.                         echart.setOption(option);
74.                 </script>
75.         </body>
76. </html>

复制代码

终于到底啦，你是最棒的哟