ECharts实现数据可视化 “ 10分钟入门 “ 教程（超详细）

最新推荐文章于 2025-03-12 15:20:08 发布
最新推荐文章于 2025-03-12 15:20:08 发布
阅读量8.5k 收藏 87
点赞数 9
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64875238/article/details/127560306
版权

（起源！）ECharts介绍

官网链接：👉 Apache ECharts 👈

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

阅读本教程前，您需要了解的知识：

阅读本教程，您需要有以下基础：

HTML 教程
JavaScript 教程

第一个 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>
效果图在这里插入图片描述

如何 ECharts 是不是可简单！

接下来给大家详细介绍ECharts

一，ECharts 安装

1、独立版本

我们可以在直接下载 echarts.min.js 并用

👇 echarts.min.js(4.7.0)

另外，开发环境下可以使用源代码版本 echarts.js 并用 < script > 标签引入，源码版本包含了常见的错误提示和警告。

👇 echarts.js(4.7.0)

我们也可以在 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>

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

第三步: 设置配置信息

ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

title: {
    text: '第一个 ECharts 实例'
}
提示信息

配置提示信息：

tooltip: {},
图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}
X 轴

配置要在 X 轴显示的项:

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
Y 轴

配置要在 Y 轴显示的项。

yAxis: {}
系列列表

每个系列通过 type 决定自己的图表类型:

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

每个系列通过 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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

看完了就关注一下嘛

在这里插入图片描述

邢帥兵_
关注
ECharts 数据可视化 上 基础篇
m0_55170432的博客
04-01 1388
1.0 数据可视化 数据可视化主要目的： 借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 1.1 数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： 通用报表 移动端图表 大屏可视化 图编辑&图分析 地理可视化 1.2 常见的数据可视化库（国内主流用 ECharts） D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源
ECharts实现数据可视化入门教程（超详细）
2401_84092143的博客
04-19 1067
ECharts入门教程。
Echarts数据可视化教程(超详细，持续更新中....)
热门推荐
stc_ljc的博客
01-04 13万+
Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。持续更新中！！！
ECharts数据可视化库全攻略
最新发布
weixin_31641077的博客
03-12 1015
本文还有配套的精品资源，点击获取 简介：ECharts是百度开源的JavaScript数据可视化库，提供多种图表类型和便捷交互，适用于Web数据可视化。本文将介绍如何在本地环境中设置ECharts项目，并通过具体的示例展示如何利用ECharts进行数据的可视化展示。从环境搭建、代码克隆、依赖安装到初始化和配置图表，以及ECharts强大的功能和特性，本文将全面覆盖EChar...
echarts入门教程（超级详细带案例）
m0_55734030的博客
10-27 11万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
ECharts数据可视化
qq_63806300的博客
06-23 5946
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts教程(详细)
qq_41974199的博客
03-01 1万+
非常全面的ECharts教程，目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景、工具提醒边框、工具提醒阴影、工具提醒文字样式、工具箱、工具箱图标、工具箱标题、工具箱功能、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示图标文字大小、类别显示图标文字颜色、轴方向等多达四十个快捷键使
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
manfanying的博客
04-03 2万+
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
ECharts实现数据可视化入门详解
ning的博客
11-13 1625
ECharts是由百度团队开源，后捐赠给Apache基金会的数据可视化图表库。它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图、地图等，并且支持高度个性化定制。ECharts的高性能使得它能够流畅地运行在PC和移动设备上，兼容主流浏览器。ECharts作为一个强大的数据可视化库，为我们提供了丰富的图表类型和高度的可定制性。通过简单的配置，我们可以实现各种复杂的数据可视化需求。本文只是介绍了ECharts的一些基础用法，更多的高级功能和配置项，推荐大家访问ECharts的官方文档进行深入学习。版权声明。
ECharts实现数据可视化入门教程（超详细）(2)
2401_84418883的博客
04-28 1019
ECharts的基础配置。
用Echarts对数据实现可视化操作
05-16
对数据处理结果的形象展示，将得到的结果以条形图，折线图显示，其中标出最大，最小值，以及平均值线的绘制
Echarts入门教程
11-01
改资源主要是介绍了如何使用Echarts，来源于Echarts的核心开发者林峰。
echarts使用详细教程
qq_45530512的博客
07-05 249
echart使用教程
数据可视化——ECharts基础
qq_45918426的博客
05-24 2263
文章目录数据可视化前言数据可视化数据可视化的好处 数据可视化前言 数据可视化 数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息。说白了，就是把数据以更加直观的方式进行呈现. 那什么方式是更加直观的方式呢? 就是图 表. 以服装店的销售产品数量举例： 直接观察，我们很难有清晰的对比，因此我们通过数据可视化可得到： 数据可视化以后，通过图表更加直观的看出上下半年产品的销售数量，数据之间的关系一目了然。 数据可视化的好处 1、清晰有效地传达与沟通信息 2、更容易洞察隐藏在数据中的信息 ...
ECharts 使用教程 (图文教程--版本4.6.0)
Python美丽星球--微信(Felixzfb)
02-07 1万+
ECharts使用教程(图文版)----(2020.02.02) 武汉加油----冲鸭，雄起！！！ 成都兄弟挺你！ 文中项目参考：项目GitHub地址 Python 实现 2019 新型冠状病毒疫情地图可视化 (basemap + matplotlib) 1. ECharts概述 1.1 ECharts介绍 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 ...
echarts实现数据可视化
m0_45052521的博客
11-18 2万+
目录 1.数据可视化前言 1.1什么是数据可视化 1.2数据可视化的好处 1.3数据可视化的实现方式 2.ECharts的基本使用 2.1ECharts的快速上手 2.2相关配置 3.ECharts常用图表 3.1柱状图 3.2折线图 3.3堆叠图 3.4散点图 3.5直角坐标系常见配置 1.数据可视化前言 1.1什么是数据可视化 数据可视化，简单来说就是把数据以更加直观的方式进行呈现。 例如一组数据 我们可以用图表的形式形式呈现出来 1.2数据可视化的..
快速入门： echarts.js 数据可视化教程
"本文主要介绍了前端数据可视化框架echarts.js的使用指南，包括其优势、特点以及适用场景。作者在文中分享了选择echarts.js的原因，如易用性、按需打包、开源以及内置中国地图功能。同时，也提到了其体积大、可定制...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值