ECharts数据可视化：入门、实战与进阶干货

于 2021-04-01 15:37:57 发布
阅读量1.2k 收藏 8
点赞数
文章标签： 可视化
原文链接：https://blog.youkuaiyun.com/qq_15041931/article/details/112518951?spm=1001.2014.3001.5501
版权
本文介绍ECharts数据可视化库的基本使用方法，包括折线图、柱状图、饼图及地图等常见图表类型的配置和展示，并提供了丰富的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ECharts数据可视化：入门、实战与进阶干货

定义

     ECharts，Enterprise Charts，商业级数据图表，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 端和移动端的绝大部分浏览器上，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特性

  1. 丰富的可视化类型（统计数据可视化、地理数据可视化、关系数据可视化）
  2. 多种数据格式无需转换直接使用（二维表、key-value键值对）
  3. 千万数据的前端展示
  4. 移动端优化，交互和布局适配，按需打包
  5. 跨平台使用（PC端、移动端、微信小程序）
  6. 绚丽的特效
  7. ......

ECharts 基本使用

快速上手五部曲

  • 引入 echarts.js 文件
  • 准备一个呈现图表的盒子
  • 基于 DOM 容器，初始化 echarts 实例对象
  • 指定配置项和数据
  • 将配置项设置给 echarts 实例对象

基础配置

首先 ECharts 的图形化呈现主要是通过配置方法来实现的 setOption，然后是对图形标签进行初始化，最后把配置方法 setOption 赋值到初始化图形中，详细的配置文件请戳这里 https://echarts.apache.org/zh/option.html#title

编程实操

HTML基本模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>HTML基本页面模板</title>
</head>
<body>
	<!-- 1.引入echarts.js文件，通过CDN引入 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<!-- 2.准备一个呈现图表的盒子，必须设置宽高 -->
	<div id="main" style="width:600px;height:450px;"></div>
	<script>
		// 3.获取DOM元素，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 4.指定图表的配置项和数据
		var option = {
			// ...
		}
		// 5.使用指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
</html>

折线图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>echarts折线图示例</title>
</head>
<body>
	<!-- 1.引入echarts.js文件 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<!-- 2.准备一个呈现图表的盒子 -->
	<div id="main" style="width:600px;height:450px;"></div>
	<script>
		// 3.获取DOM元素，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 4.指定图表的配置项和数据
		var option = {
			title: { // 标题
				text: 'Echarts入门示例'
			},
			tooltip: {
				trigger: 'axis', // 坐标轴触发
				axisPointer: { // 坐标轴指示器
		            type: 'cross',
		            label: {
		                backgroundColor: '#283b56'
		            }
		        }
			}, // 提示框
			legend: {
				data: ['区块链应用']
			}, // 图例
			xAxis: { // 直角坐标系x轴
				data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']
			},
			yAxis: {
				name: '注册用户（个）',
			}, // 直角坐标系y轴
			series: [{ // 系列列表
				name: '区块链应用', // 系列名称
				type: 'line', // 图表类型
				smooth: true, // 平滑曲线显示
				data: [48, 18, 9, 25, 2], // 数据内容数组 
			}]
		}
		// 5.使用指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
</html>

柱状图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>echarts柱状图示例</title>
</head>
<body>
	<!-- 1.引入echarts.js文件 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<!-- 2.准备一个呈现图表的盒子 -->
	<div id="main" style="width:600px;height:450px;"></div>
	<script>
		// 3.获取DOM元素，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 4.指定图表的配置项和数据
		var option = {
			title: { // 标题
				text: 'Echarts入门示例'
			},
			tooltip: {
				trigger: 'axis', // 坐标轴触发
				axisPointer: { // 坐标轴指示器
		            type: 'shadow',
		            label: {
		                backgroundColor: '#283b56'
		            }
		        }
			}, // 提示框
			legend: {
				data: ['区块链应用']
			}, // 图例
			xAxis: { // 直角坐标系x轴
				data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']
			},
			yAxis: {
				name: '注册用户（个）',
			}, // 直角坐标系y轴
			series: [{ // 系列列表
				name: '区块链应用', // 系列名称
				type: 'bar', // 图表类型
				data: [48, 18, 9, 25, 2], // 数据内容数组 
			}]
		}
		// 5.使用指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
</html>

饼图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>echarts柱状图示例</title>
</head>
<body>
	<!-- 1.引入echarts.js文件 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<!-- 2.准备一个呈现图表的盒子 -->
	<div id="main" style="width:600px;height:450px;"></div>
	<script>
		// 3.获取DOM元素，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 4.指定图表的配置项和数据
		var option = {
			title: { // 标题
				text: 'Echarts入门示例'
			},
			tooltip: {
				trigger: 'item', // 数据项图形触发
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			}, // 提示框
			legend: {
				data: ['区块链应用']
			}, // 图例
			series: [{ // 系列列表
				name: '区块链应用', // 系列名称
				type: 'pie', // 图表类型
				data: [
					{
						value: 48, name: '天河数通'
					},
					{
						value: 18, name: '地质大数据'
					},
					{
						value: 9, name: '自主可控公链'
					},
					{
						value: 20, name: '优版权'
					},
					{
						value: 2, name: '敏捷指控'
					}
				] 
			}]
		}
		// 5.使用指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
</html>

地图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>echarts实现地图数据展示</title>
	<style>
	html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-size: 100%;
			vertical-align: baseline;
			background: transparent
		}
		html,body {
			width: 100%;
			height: 100%;
		}
		#main {
			width: 1000px;
			height: 900px;
		}
	</style>
</head>
<body>
	<!-- 1.引入echarts.js文件 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<script src="china.js"></script>
	<!-- <script src="world.js"></script> -->
	<!-- 2.准备一个呈现图表的盒子 -->
	<div id="main"></div>
	<script>
		// 3.获取DOM元素，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var dataList =  [
            {name: '南海诸岛', value:0},
            {name: '北京', value: randomValue()},
            {name: '天津', value: randomValue()},
            {name: '上海', value: randomValue()},
            {name: '重庆', value: randomValue()},
            {name: '河北', value: randomValue()},
            {name: '河南', value: randomValue()},
            {name: '云南', value: randomValue()},
            {name: '辽宁', value: randomValue()},
            {name: '黑龙江', value: randomValue()},
            {name: '湖南', value: randomValue()},
            {name: '安徽', value: randomValue()},
            {name: '山东', value: randomValue()},
            {name: '新疆', value: randomValue()},
            {name: '江苏', value: randomValue()},
            {name: '浙江', value: randomValue()},
            {name: '江西', value: randomValue()},
            {name: '湖北', value: randomValue()},
            {name: '广西', value: randomValue()},
            {name: '甘肃', value: randomValue()},
            {name: '山西', value: randomValue()},
            {name: '内蒙古', value: randomValue()},
            {name: '陕西', value: randomValue()},
            {name: '吉林', value: randomValue()},
            {name: '福建', value: randomValue()},
            {name: '贵州', value: randomValue()},
            {name: '广东', value: randomValue()},
            {name: '青海', value: randomValue()},
            {name: '西藏', value: randomValue()},
            {name: '四川', value: randomValue()},
            {name: '宁夏', value: randomValue()},
            {name: '海南', value: randomValue()},
            {name: '台湾', value: randomValue()},
            {name: '香港', value: randomValue()},
            {name: '澳门', value: randomValue()}
    	]

		function randomValue() {
			return Math.round(Math.random() * 1000);
		}

		// 指定图表的配置项和数据
		var option = {
			tooltip: {
				trigger: 'item', // 数据项图形触发
				// 数据格式化
		        // formatter: function(params, ticket, cb) {
          //           return params.seriesName + '<br />' + params.name+ '：' + params.value;
          //       }
		    },
		    visualMap: { // 视觉映射
                min: 0,
                max: 1000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'], // 取值范围的文字
                realtime: false,  // 拖拽时，是否实时更新
                calculable: true,  // 是否显示拖拽用的手柄
                color: ['orangered', 'yellow', 'lightskyblue'],  
                // inRange: {
                //     color: ['#e0ffff', '#006edd'] // 取值范围的颜色
                // },
                // show: false // 图注
            },
			series: [{
				name: '信息量',
				type: 'map', 
            	map: 'china', // 地图类型
				roam: false, // 是否开启鼠标缩放和平移
				// zoom: 1.2, // 视角缩放比例
            	label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0, 0, 0, 0.7)',
                        formatter: '{b} \n\n {c}'
					}
                },

                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#f3e42e', // 鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
				data: dataList1
			}]
		}
		// 使用指定的配置项和数据显示图表
		myChart.setOption(option);

		setInterval(() => {
			var dataList =  [
	            {name: '南海诸岛', value:0},
	            {name: '北京', value: randomValue()},
	            {name: '天津', value: randomValue()},
	            {name: '上海', value: randomValue()},
	            {name: '重庆', value: randomValue()},
	            {name: '河北', value: randomValue()},
	            {name: '河南', value: randomValue()},
	            {name: '云南', value: randomValue()},
	            {name: '辽宁', value: randomValue()},
	            {name: '黑龙江', value: randomValue()},
	            {name: '湖南', value: randomValue()},
	            {name: '安徽', value: randomValue()},
	            {name: '山东', value: randomValue()},
	            {name: '新疆', value: randomValue()},
	            {name: '江苏', value: randomValue()},
	            {name: '浙江', value: randomValue()},
	            {name: '江西', value: randomValue()},
	            {name: '湖北', value: randomValue()},
	            {name: '广西', value: randomValue()},
	            {name: '甘肃', value: randomValue()},
	            {name: '山西', value: randomValue()},
	            {name: '内蒙古', value: randomValue()},
	            {name: '陕西', value: randomValue()},
	            {name: '吉林', value: randomValue()},
	            {name: '福建', value: randomValue()},
	            {name: '贵州', value: randomValue()},
	            {name: '广东', value: randomValue()},
	            {name: '青海', value: randomValue()},
	            {name: '西藏', value: randomValue()},
	            {name: '四川', value: randomValue()},
	            {name: '宁夏', value: randomValue()},
	            {name: '海南', value: randomValue()},
	            {name: '台湾', value: randomValue()},
	            {name: '香港', value: randomValue()},
	            {name: '澳门', value: randomValue()}
	    	]

	    	myChart.setOption({
	    		series: [{
	    			data: dataList
	    		}]
	    	});
		}, 3000)
	</script>
</body>
</html>

运行效果如下图所示：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值