好物推荐
技巧分享

[笔记]用echats将数据可视化图表化

效果图

完整代码如下


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

		<title>折线图</title>
		<!-- 引入 ECharts  -->
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
		<style type="text/css">
			#main {
				max-width: 600px;
				width: 100%;
				height: 400px;
				margin: 0 auto;
				margin-top: 50px;
			}

			.btn,
			p {
				text-align: center;
			}

			.btn>a {
				margin: 20px;
				padding: 10px;
				background-color: blueviolet;
				color: #fff;
				text-decoration: none;
				box-shadow: #aa55ff 2px -2px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="btn">
			<h2>XX产品历年出货量</h2>
			<a href="index.html">折线图</a>
			<a href="index2.html">柱形图</a>
		</div>
		<div id="main">
		</div>
		<p>
			by 蓝色创想
		</p>
		<script type="text/javascript">
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//指定图标的配置项和数据
			var option = {
				title: {
					text: '出货量',
					subtext: '单位:万台'
				},//鼠标滑过时候显示对应数据
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['油烟机', '洗衣机', '冰箱']
				},//显示下载按钮,将图表为保存为png图片
				toolbox: {
					featrue: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2015年', '2016年', '2017年', '2018年', '2019年', '2020年']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					name: '油烟机',
					type: 'line',
					data: [10, 30, 70, 130, 250, 700]
				}, {
					name: '洗衣机',
					type: 'line',
					data: [5, 15, 30, 60, 190, 500]
				}, {
					name: '冰箱',
					type: 'line',
					data: [0.5, 1, 1.7, 20, 40, 45]
				}]
			};
			//使用刚才指定的配置项和数据显示图标
			myChart.setOption(option);
		</script>
	</body>
</html>

记录几点重点

  1. series中的type值:line(折线图),bar(柱形图)。
  2. tooltip中trigger: 'axis'鼠标滑过时显示提示数据。

未经允许不得转载:蓝色创想 » [笔记]用echats将数据可视化图表化

分享到: 生成海报
本站源码仅供学习交流,如需商用请在官方购买正版。技术服务为增值服务。如有问题看联系站长QQ:1305675066

热门文章

  • 实践是学习的最佳途径

    了解更多开通会员
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

    本站出售,价格优惠!(不含服务器)

    联系站长