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

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量7.1k 收藏 82
点赞数 7
文章标签： 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>

在这里插入图片描述

看完了就关注一下嘛

在这里插入图片描述

邢帥兵_
关注
  • 7
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
ECharts 数据可视化 上 基础篇
m0_55170432的博客
04-01 1048
1.0 数据可视化 数据可视化主要目的： 借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 1.1 数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： 通用报表 移动端图表 大屏可视化 图编辑&图分析 地理可视化 1.2 常见的数据可视化库（国内主流用 ECharts） D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
manfanying的博客
04-03 2729
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
ECharts的讲解
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
echarts(7大基础图表)的使用
qq_44930306的博客
05-28 1512
echarts基础应用
ECharts实战教程
星航夜空的帆舟
06-08 6418
pink老师讲解的ECharts可视化项目。。。
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
echarts数据可视化介绍+常用的图表案例分析（值得收藏的干活）
promise466的博客
10-28 8134
Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便
期末大作业-基于Vue3+TS+ECharts实现数据可视化报表项目源码.zip
06-20
期末大作业-基于Vue3+TS+ECharts实现数据可视化报表项目源码.zip期末大作业-基于Vue3+TS+ECharts实现数据可视化报表项目源码.zip期末大作业-基于Vue3+TS+ECharts实现数据可视化报表项目源码.zip期末大作业-基于Vue3+...
SSM框架使用Echarts动态数据可视化
12-18
这是使用SSM框架+Echarts实现的mysql动态数据可视化，绘制了柱形图、饼图等，包括sql文件在内，下载导入eclipse、IDEA等直接运行即可。 博客同步讲解代码：...
echarts数据可视化入门
08-13
**ECharts 数据可视化入门** ECharts 是一个由百度开源的，基于 JavaScript 的数据可视化库，它提供了丰富的图表类型，如柱状图、饼状图、折线图等，且具有良好的交互性和高度自定义的特性。对于初学者来说，...
课程期末大作业-基于Echarts的数据可视化学习空间项目源码(visual studio运行).zip
最新发布
06-22
课程期末大作业-基于Echarts的数据可视化学习空间项目源码(visual studio运行).zip 【资源说明】 1、项目源码在上传前，都经过本地成功运行，功能测试无误。请放心下载使用！答辩评审平均分达到97.5分，有问题请及时...
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
3. 大数据分析可视化平台数据可视化 重点： 1. 大数据分析可视化平台数据导入 2. 大数据分析可视化平台数据可视化 难点： 1. 大数据分析可视化平台数据导入 2. 大数据分析可视化平台数据可视化 教学目标： 1. ...
ECharts实现数据可视化入门教程
m0_69674158的博客
07-03 1838
Echarts数据可视化图表案例（拿来即用）
大数据数据可视化工具ECharts，从入门到精通！
qq_45746668的博客
01-24 679
ECharts是一个强大的数据可视化图表库，它基于JavaScript开发，并具有丰富的特性和灵活性。 多平台支持：ECharts可以在PC和移动设备上流畅运行，它对移动端进行了优化，确保在不同设备上都有良好的展示效果。
Echarts type值汇总
weixin_44928631的博客
09-28 3627
Echarts
echarts图中type为graph，设置x,y图形错位
weixin_42732925的博客
04-23 1961
option = { title: { text: 'Graph 简单示例' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', symbolSize...
echarts 关系图graph
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
echarts使用详细教程
qq_45530512的博客
07-05 192
echart使用教程
Echarts数据可视化
专研前端，探索后端
10-06 2616
数据可视化,echarts简介：ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，兼容性极好，支持pc和移动等多端，开源免费，社区活跃，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目；JavaScript数据可视化库有很多种，常用的如：D3.js、Recharts、Chart.js等，ECharts 其官网：https://echarts.apache.org/zh/index.html
在vue里使用ECharts实现数据可视化
04-28
要在Vue中使用ECharts实现数据可视化，你需要按照以下步骤进行操作： 1. 安装ECharts：你可以使用npm来安装ECharts，命令如下： ```bash npm install echarts --save ``` 2. 引入ECharts：在Vue组件中，你需要引入ECharts并将其挂载到Vue实例的data属性中，如下所示： ```javascript import echarts from 'echarts' export default { data() { return { chart: null } }, mounted() { this.chart = echarts.init(this.$refs.chart) // 在这里使用this.chart来配置图表 } } ``` 3. 配置ECharts：你需要使用ECharts的API来配置图表，例如： ```javascript this.chart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 5] }] }) ``` 4. 在Vue模板中使用ECharts：你需要在模板中使用ref来引用ECharts容器，并将其传递给Vue组件中的mounted钩子函数，如下所示： ```html <template> <div ref="chart" style="width: 100%; height: 500px;"></div> </template> ``` 以上就是在Vue中使用ECharts实现数据可视化的基本步骤，希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值