Echarts 1 基本环节搭建

最新推荐文章于 2023-09-19 04:18:15 发布

转载最新推荐文章于 2023-09-19 04:18:15 发布 · 199 阅读

文章标签：

#ECHARTS

本文详细介绍了使用Echarts创建图表的过程，包括导入库文件、设置图表样式、定义数据系列等关键步骤。通过具体实例，展示了如何配置标题、图例、横纵坐标及数据系列，帮助读者快速掌握Echarts的基本用法。

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

1.导入Echarts 在这里插入图片描述
2.scripts引用
3.var myChart = echarts.init($("#e1")[0]);
4.myChart.setOption(option)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#e1{
				width: 500px;
				height: 300px;
				border:2px solid aqua;
			}
		</style>
		<script type="text/javascript" src="../js/echarts.js" />
		</script>
		<script type="text/javascript" src="../js/jquery.js" />
		</script>
	</head>
	<body>
		<div id="e1"></div>
	</body>

	<script type="text/javascript">
		var myChart = echarts.init($("#e1")[0]);
		var option = {
			title: {
				text: "echarts-demo"
			},
			tooltip: {},
			legend: {
				data: ['销量', '业绩']
			},
			xAxis: {
				data: ['商品A', '商品B', '商品C', '商品D', '商品E']
			},
			yAxis: {},
			series: [{
					name: "销量",
					type: "bar",
					data: [5, 8, 6, 6, 8]
				},
				{
					name: "业绩",
					type: "bar",
					data: [6, 8, 6, 6, 6]
				}
			]
		}
		myChart.setOption(option)
	</script>
</html>

属性描述 title 图标的标题组件
text 组件文本信息
tooltip 鼠标hover到series的某一项出现的显示信息组件
legend 图例组件
data 横轴的数据有多少个分类
xAxis 横轴
data 横轴有多少种数据
yAxis 纵轴
series 展示数据的数据集合
name
type
data
series数数据与横轴数据一一对应