ECharts

最新推荐文章于 2023-12-10 17:56:32 发布

维他柠檬茶阿i

最新推荐文章于 2023-12-10 17:56:32 发布

阅读量245

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42431775/article/details/122973537

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ECharts是一款强大的前端数据可视化库，可用于创建各类图表。本文介绍了ECharts的安装方法，包括官网下载和npm安装，并详细讲解了其引用、设置容器、初始化图表、配置参数及最终展示的步骤，特别强调了调整图表参数的重要性。

摘要由CSDN通过智能技术生成

一、ECharts是什么？

ECharts是前端数据可视化的一个图表库，用于制作各种可视化图表

二、ECharts的安装方法

1.官网下载

https://echarts.apache.org/zh/download.html

2.用npm安装

win+R输入cmd进入命令窗口

cd /
cd 所要安装的目录
cnpm i echarts

三、ECharts的引用

<script src="echarts.min.js" charset="utf-8"></script>

四、ECharts的使用

1.为echarts图表设置容器

2.编辑容器参数

如

<style media="screen">
	body{
		background: #333;
	}
	.view{
		min-width:400px;
		border: 1px solid #FFFFFF;
		line-hight:30px;
		min-width:400px;
		min-hight:400px;
	}
</style>
<body>
	<div id="view"></div>
</body>

3.初始化echarts

let view=document.querySelector('#view');
let chart1 = echarts.init(view);

4.调整echarts参数(核心，重中之重)

//基本折线图
let option={
	//x轴
	XAxis: {
		//x轴的类型
		type: 'category',
		//x轴上是否有边界
		boundaryGap: false,
		//x轴上显示的数据
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
	},
	//y轴
	yAxis: {
		type: 'value'
	},
	//图表中的数值(是数组)，y轴显示的数据会根据data的设置而自动生成，而data则是这个图表的内容(要与x轴的data个数匹配)，series的[]内有几对{}就代表有几条曲线(类型可以都不相同，根据需要填写类型)
	series: [
		<!--{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			//曲线是否平滑，也可以为数值(范围在0-1)
			smooth: true,
			//面积是否有颜色
			areaStyle: {},
			//设置线的样式
			lineStyle: {
				color: '#5470C6',
				width: 5
			},
			//设置竖状对比线
			markLine: {
				symbol: ['none', 'none'],
				//lable为false则data的竖线上不会出现data选取的值
				label: { show: false },
				//选取显示竖状线的位置
				data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
			},
		},-->
		{
			data: [468, 2999, 27, 934, 113, 300, 1320],
			type: 'bar',
			smooth: false
		}
	]
};