e-charts图表用法

最新推荐文章于 2024-05-13 10:55:21 发布

卷B只有挂在墙上才知道休息

最新推荐文章于 2024-05-13 10:55:21 发布

阅读量405

点赞数 1

分类专栏：为不上班而上班文章标签： e-charts 前端图表数据图表管理系统图表

本文链接：https://blog.csdn.net/qq_39051175/article/details/100700710

版权

为不上班而上班专栏收录该内容

95 篇文章 8 订阅

订阅专栏

效果如下
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="chartmain" style="width:400px; height: 400px;"></div>
		
		<!-- 通过CDN引入e-charts -->
		<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts-en.common.js"></script>
		<script type="text/javascript">
			//指定图标的配置和数据
			var option = {
				title: {
					text: 'ECharts 数据统计'
				},
				tooltip: {},
				legend: {
					data: ['用户来源']
				},
				xAxis: {
					data: ["Android", "IOS", "PC", "Ohter"]
				},
				yAxis: {

				},
				series: [{
					name: '访问量',
					type: 'bar',    
					data: [520, 210, 365, 119]
				}]
			};
			//初始化echarts实例
			var myChart = echarts.init(document.getElementById('chartmain'));

			//使用制定的配置项和数据显示图表
			myChart.setOption(option);
		</script>
	</body>
</html>

如果要其他种类的图表，可以修改series下的type
数据部分由后端发给你，代入对应位置即可。

卷B只有挂在墙上才知道休息

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
e-charts图表用法

效果如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="chartmain" style="width:400px; height: 40...
复制链接

扫一扫