-
ECharts实现数据可视化 “ 10分钟入门 “ 教程（超详细）
（起源！）ECharts介绍
官网链接：👉 Apache ECharts 👈
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。阅读本教程前，您需要了解的知识：
阅读本教程，您需要有以下基础：
第一个 ECharts 实例
注 释 超 详 细
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 01 导入js --> <script src="js/echarts.min.js"></script> <!-- 03 设置容器的样式 --> <style> #container{ width: 800px; height: 600px; } </style> </head> <body> <!-- 02 创建个容器 --> <div id="container"></div> </body> <script> //04 实例化echarts // 4.1 创建一个实例 var echart = echarts.init(document.getElementById("container")) // 4.2 定义配置项 var option = { // 图表的标题 title:{ text:"我的第一个图表" }, // 图表的提示 tooltip:{}, // 图例 legend:{data:["睡眠时长"]}, // x轴线 xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]}, // y轴线 yAxis:{}, // 设置数据 series:[ { // 数据名称 name:"睡眠时长", // 类型为柱状图 type:"bar", // 数据data data:[8,10,4,5,9,4,8] } ] } // 4.3 更新配置 echart.setOption(option); // chart图表，set设置 Option选项 data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 // legend传奇（图例） tooltip 提示 init初始化 document文档 </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
效果图
如何 ECharts 是不是可简单！
接下来给大家详细介绍ECharts
一，ECharts 安装
1、独立版本
我们可以在直接下载 echarts.min.js 并用
另外，开发环境下可以使用源代码版本 echarts.js 并用 < script > 标签引入，源码版本包含了常见的错误提示和警告。
我们也可以在 ECharts 的官网上直接下载更多丰富的版本，包含了不同主题跟语言，下载地址：https://echarts.apache.org/zh/download.html。
这些构建好的 echarts 提供了下面这几种定制：
1，完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
2，常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
3，精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。二，ECharts 配置语法
第一步：创建 HTML 页面
创建一个 HTML 页面，引入 echarts.min.js：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
第二步: 为 ECharts 准备一个具备高宽的 DOM 容器
实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:
<body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>- 1
- 2
- 3
- 4
第三步: 设置配置信息
ECharts 库使用 json 格式来配置。
echarts.init(document.getElementById('main')).setOption(option);- 1
这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：
标题
为图表配置标题：
title: { text: '第一个 ECharts 实例' }- 1
- 2
- 3
提示信息
配置提示信息：
tooltip: {},- 1
图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: { data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
X 轴
配置要在 X 轴显示的项:
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }- 1
- 2
- 3
Y 轴
配置要在 Y 轴显示的项。
yAxis: {}- 1
系列列表
每个系列通过 type 决定自己的图表类型:
series: [{ name: '销量', // 系列名称 type: 'bar', // 系列图表类型 data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容 }]- 1
- 2
- 3
- 4
- 5
每个系列通过 type 决定自己的图表类型：👇👇👇👇👇👇
type: ‘bar’：柱状/条形图
type: ‘line’：折线/面积图
type: ‘pie’：饼图
type:scatter’：散点（气泡）图
type: ‘effectScatter’：带有涟漪特效动画的散点（气泡）
type:radar’：雷达图
type: ‘tree’：树型图
type: ‘treemap’：树型图
type: ‘sunburst’：旭日图
type: ‘boxplot’：箱形图
type: ‘candlestick’：K线图
type: ‘heatmap’：热力图
type: ‘map’：地图
type: ‘parallel’：平行坐标系的系列
type: ‘lines’：线图
type: ‘graph’：关系图
type: ‘sankey’：桑基图
type: ‘funnel’：漏斗图
type: ‘gauge’：仪表盘
type: ‘pictorialBar’：象形柱图
type: ‘themeRiver’：主题河流
type: ‘custom’：自定义系列三， 实例
以下为完整的实例：
1，柱状图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 01 导入js --> <script src="js/echarts.min.js"></script> <!-- 03 设置容器的样式 --> <style> #container { width: 800px; height: 600px; } </style> </head> <body> <!-- 02 创建个容器 --> <div id="container"></div> </body> <script> //04 实例化echarts // 4.1 创建一个实例 var echart = echarts.init(document.getElementById("container")) // 4.2 定义配置项 var option = { // 图表的标题 title: { text: "我的第一个图表" }, // 图表的提示 tooltip: {}, // 图例 legend: { data: ["睡眠时长"] }, // x轴线 xAxis: { data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, // y轴线 yAxis: {}, // 设置数据 series: [{ // 数据名称 name: "睡眠时长", // 类型为柱状图 type: "bar", // 数据data data: [8, 10, 4, 5, 9, 4, 8] }] } // 4.3 更新配置 echart.setOption(option); // chart图表，set设置 Option选项 data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 // legend传奇（图例） tooltip 提示 init初始化 document文档 </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
2，折线曲线图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 01，导入JS --> <script src="js/echarts.min.js"></script> </head> <style type="text/css"> /* 03，设置容器样式 */ #container { width: 800px; height: 600px; margin: 0 auto; } </style> <body> <!-- 02，创建一个容器 --> <div id="container"> </div> </body> <script type="text/javascript"> // 04，实例化echart // 4.1，创建一个实例 var echart = echarts.init(document.getElementById("container")) // 4.2，定义配置项 var option = { // 图表的标题 title: { text: "我是第一个图表" }, // 图表的提示 tooltip: {}, // 图例 legend: { data: ["睡眠时长"] }, // X轴 xAxis: { data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, // Y轴 yAxis: {}, // 设置数据 series: [{ // 数据名称 name: "睡眠时长", // 类型为柱状图 type: "bar", // 数据data data: [8, 10, 4, 5, 7, 2, 8] }, { // 数据名称 name: "敲代码时长", // 类型为柱状图 type: "line", smooth: true, // 数据data data: [12, 13, 14, 15, 7, 12, 8] }, { // 数据名称 name: "玩游戏时长", // 类型为柱状图 type: "line", // smooth: true, // 数据data areaStyle:"pink", data: [2, 0, 1, 1, 0.5, 1, 8] }, { // 数据名称 name: "成绩", // 类型为柱状图 type: "pie", // 位移 left: -80, top: 200, // 半径 radius:[80,50], // 数据data data: [{ name: "html", value: 80 }, { name: "css", value: 70 }, { name: "js", value: 60 }, { name: "vue", value: 30 }, ] }, ] } // 4.3，更新配置 echart.setOption(option); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
3，特色主题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 01，导入JS --> <script src="js/echarts.min.js"></script> <script src="./js/chalk.js"></script> </head> <style type="text/css"> /* 03，设置容器样式 */ #container { width: 800px; height: 600px; margin: 0 auto; } </style> <body> <!-- 02，创建一个容器 --> <div id="container"> </div> </body> <script type="text/javascript"> // 04，实例化echart // 4.1，创建一个实例 var echart = echarts.init(document.getElementById("container"),"chalk") // 4.2，定义配置项 var option = { // 颜色盘 // color:["#f70","#d89",#909], // 图表的标题 title: { text: "我是第一个图表" }, // 图表的提示 tooltip: {}, // 图例 legend: { data: ["睡眠时长"] }, // X轴 xAxis: { data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, // Y轴 yAxis: {}, // 设置数据 series: [{ // 数据名称 name: "睡眠时长", // 类型为柱状图 type: "bar", // 数据data data: [8, 10, 4, 5, 7, 2, 8] }, { // 数据名称 name: "敲代码时长", // 类型为柱状图 type: "line", smooth: true, // 数据data data: [12, 13, 14, 15, 7, 12, 8] }, { // 数据名称 name: "玩游戏时长", // 类型为柱状图 type: "line", // smooth: true, // 数据data areaStyle:"pink", data: [2, 0, 1, 1, 0.5, 1, 8] }, { // 数据名称 name: "成绩", // 类型为柱状图 type: "pie", // 位移 left: -80, top: -100, // 半径 radius:[80,50], // 数据data data: [{ name: "html", value: 80, itemStyle:{ normal:{color:"#2df"}, emphasis:{color:"#4fe"}, } }, { name: "css", value: 70, itemStyle:{ normal:{color:"#fdf"}, emphasis:{color:"#41e"}, } }, { name: "js", value: 60 }, { name: "vue", value: 30 }, ] }, ] } // 4.3，更新配置 echart.setOption(option); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
4，渐变色+圆角
<!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> // 定义渐变 var linear = { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#02bcff' // 0% 处的颜色 }, { offset: 1, color: '#5555ff' // 100% 处的颜色 }], global: false // 缺省为 false } //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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
5，堆叠数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/echarts.min.js"></script> <style> #container{ width: 800px; height: 600px; } </style> </head> <body> <div id="container"></div> <script> var echart = echarts.init(document.getElementById("container")) var option = { title:{text:"堆叠-张三-"}, legend:{data:["张三","李四"]}, // tooltip提示 trigger触发器 axis轴线触发，item 当前项触发 tooltip:{trigger:"axis"}, yAxis:{data:["vue","js","html"]}, xAxis:{}, series:[ {name:"张三",type:"bar",data:[80,60,75],stack:true, // stack堆叠，label 标签，position位置，inside内部，right右侧，formmater格式 // \n 代表换行，{a}系列名 "陈康" {b}数值名 "vue" {c}数值 80 label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}, {name:"李四",type:"bar",data:[95,80,35],stack:true, label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}} ] } echart.setOption(option); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
6，堆叠数据+工具箱
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/echarts.min.js"></script> </head> <style type="text/css"> #container { width: 800px; height: 600px; } </style> <body> <div id="container"> </div> </body> <script> var echart = echarts.init(document.getElementById("container")) var option = { title: { text: "堆叠" }, toolbox: { show: true, feature: { dataXoom: { yAxisIndex: "none" }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, legend: { data: ["富士康", "全国"] }, tooltip: { trigger: "axis" }, yAxis: { data: ["前天", "昨天", "今天"] }, xAxis: {}, series: [{ name: "富士康阳了", type: "bar", data: [5, 6, 7], stack: true, label: { show: true, position: "insideRight", formatter: "{a}\n{c}个人" } }, { name: "全国确诊", type: "bar", data: [8, 6, 9], stack: true, label: { show: true, position: "insideRight", formatter: "{a}\n{c}个人" } } ] } echart.setOption(option); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
7，环形图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/echarts.min.js"></script> </head> <style type="text/css"> #container { width: 800px; height: 600px; } </style> <body> <div id="container"> </div> </body> <script> var echart = echarts.init(document.getElementById("container")) var option = { title: { text: "网站访问来源" }, toolbox: { show: true, feature: { dataXoom: { yAxisIndex: "none" }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, tooltip: {}, series: [{ type: "pie", radius: [200, 110], data: [{ name: "百度", value: 1200, label: { show: true, position: "center", formatter: "{big|{d}}{small|%}\n{b}", rich:{ big:{ color:"#f70", fontSize:"48px", fontWeight:900, } } } }, { name: "其他", value: 360, itemStyle: { color: "#ccc" }, label: { show: false }, tooltip: { show: false } } ] }] } echart.setOption(option); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
8，动态图 （以下效果自行运行查看）
<!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: "新冠肺炎趋势" }, toolbox: { show: true, feature: { dataXoom: { yAxisIndex: "none" }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, 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) }] } // 每隔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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
9，缓动图 （以下效果自行运行查看）
<!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: "新冠肺炎趋势" }, toolbox: { show: true, feature: { dataXoom: { yAxisIndex: "none" }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, 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) { // 越往后的数据延迟越大 return idx * 200; }, animationDuration: function(idx) { // 每小格动画的时候 return idx * 200; }, // 弹性的方式出现动画 animationEasing: "bounceInOut" } // 每隔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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
10，发送动作 （以下效果自行运行查看）
<!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: "新冠肺炎趋势" }, toolbox: { show: true, feature: { dataXoom: { yAxisIndex: "none" }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, 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) { // 越往后的数据延迟越大 return idx * 100; }, animationDuration: function(idx) { // 每小格动画的时候 return idx * 100; }, // 弹性的方式出现动画 animationEasing: "bounceInOut" } // 每隔3秒移动一个 // 显示提示的下标 var ind = 0; var id = setInterval(play, 3000); // 播放 function play() { // 发送一个显示提示的动作 echart.dispatchAction({ type: 'showTip', // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。 seriesIndex: 0, // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项 dataIndex: ind, // 可选，数据项名称，在有 dataIndex 的时候忽略 position: "top", }) // 让ind加1 ind++; // 大于20就归0 if (ind >= 20) { ind = 0; } } echart.setOption(option); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
看完了就关注一下嘛
-
相关阅读:
阿里P8架构师强推java程序员人手一套116页JVM吊打面试官专属秘籍
批量下载微信公众号要点
Ubuntu安装git方法
求解哈夫曼树HuffmanTree以及C语言实现
P1441 砝码称重 (状压
HashTable与HashMap与ConcurrentMap的区别
齐岳定制|TCO-PEG-Ovalbumin|反式环辛烯-聚乙二醇-卵清蛋白|TCO-PEG-卵清蛋白
【已解决】msvcp140.dll丢失怎样修复？msvcp140.dll重新安装的解决方法
以管道的方式来完成复杂的流程处理
刷题笔记day03-链表
- 原文地址：https://blog.csdn.net/m0_64875238/article/details/127560306
