ECharts基础配置详解

文章目录

- 一、前言
- 二、主要功能
- 三、ECharts安装
- - 2.1 下载解压版引入
  - 2.2 使用 CDN 方法
  - 2.3 项目上安装下载
- 四、简单图表示例
- - 4.1 引入依赖文件
  - 4.2 定义一个页面展示图表的区域
  - 4.3 实例化echarts并配置图表数据
  - 4.4 完整实例
- 五、option常用配置
- - 5.1 全局主体样式配置
  - 5.2 常用配置总览
  - 5.3 title标题组件配置
  - 5.4 legend 图例组件
  - 5.5 xAxis直角坐标系grid中的x轴
  - - 5.5.1 axisLine坐标轴轴线相关设置
    - 5.5.2 axisTick坐标轴刻度相关设置
    - 5.5.3 axisLabel坐标轴刻度标签的相关设置
  - 5.6 yAxis直角坐标系grid中的y轴
  - 5.7 series具体图形配置
  - - 5.7.1 type图形类型
    - 5.7.2 图形通用配置
  - 5.8 tooltip提示框组件
  - 5.9 toolbox工具栏

一、前言

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

二、主要功能

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

三、ECharts安装

2.1 下载解压版引入

可以去官网按需定制图表模块进行下载对应压缩包，并用

按需配置下载地址：https://echarts.apache.org/zh/download.html

2.2 使用 CDN 方法

Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

使用的是国外的地址可能引入打开页面，加载时间会过长。尝试练习还是建议下载到本地引入即可；

2.3 项目上安装下载

npm install echarts --save

四、简单图表示例

4.1 引入依赖文件

<script src="js/echarts.min.js"></script>

4.2 定义一个页面展示图表的区域

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="echartsBox" style="width: 600px;height:400px;"></div>

4.3 实例化echarts并配置图表数据

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('echartsBox'));
// 指定图表的配置项和数据
const option = {
	title: {
		text: '柱状图实例'
	},
	xAxis: {
		data: ['周一', '周二', '周三', '周四', '周五']
	},
	yAxis: {},
	series: [{
		name: '情绪',
		type: 'bar',
		data: [5, 30, 50, 80, 100]
	}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4.4 完整实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图表示例</title>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="echartsBox" style="width: 600px;height:400px;"></div>
		<script>
			// 基于准备好的dom，初始化echarts实例
			const myChart = echarts.init(document.getElementById('echartsBox'));
			// 指定图表的配置项和数据
			const option = {
				title: {
					text: '柱状图实例'
				},
				xAxis: {
					data: ['周一', '周二', '周三', '周四', '周五']
				},
				yAxis: {},
				series: [{
					name: '情绪',
					type: 'bar',
					data: [5, 30, 50, 80, 100]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>

五、option常用配置

5.1 全局主体样式配置

backgroundColor：图表背景色，默认无背景；
color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
animation：是否开启动画；
textStyle：全局的字体样式配置；
1. color：文字颜色；
2. fontStyle：文字字体风格；
3. fontWeight：文字字体粗细；
4. fontFamily：文字字体；
5. fontSize：文字字体大小；
6. lineHeight：行高；
7. width：文本显示宽度；
8. height：文本显示高度；
9. …其他配置请见官网文档：

5.2 常用配置总览

title：标题组件，包含主标题和副标题；
legend：图例组件，多条数据时分类；
xAxis：直角坐标系grid中的x轴；
yAxis：直角坐标系grid中的y轴；
series：具体图形配置，数据源配置；
grid：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴；
tooltip：提示框组件；
toolbox：工具栏，内置有导出图片，数据视图；

5.3 title标题组件配置

其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
text、subtext	String	主标题、副标题文本
link、sublink	String	主标题、副标题文本超链接
textStyle、subtextStyle	Object	主标题、副标题文本样式
textAlign	String	水平对齐方式
textVerticalAlign	String	垂直对齐方式
top、right、bottom、right	String	文本距离容器四侧的位置
padding	String	标题组件内边距

5.4 legend 图例组件

当有多条数据时展示了数据分类展示；其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
data	Array	图例的数据数组
formatter	String、Function	用来格式化图例文本
orient	String	图例列表的布局朝向
itemStyle	Object	图例的图形样式
textStyle	Object	文本样式
align	String	水平对齐方式
textVerticalAlign	String	垂直对齐方式
top、right、bottom、right	String	文本距离容器四侧的位置
padding	String	标题组件内边距

5.5 xAxis直角坐标系grid中的x轴

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
data	Array	x轴的标题数据
nameTextStyle	Object	坐标轴名称的文字样式，同textStyle
axisLine	Object	坐标轴轴线相关设置。详情见下方
axisTick	Object	坐标轴刻度相关设置，详情见下方
axisLabel	Object	坐标轴刻度标签的相关设置。
nameRotate	number	坐标轴名字旋转，角度值。
min、max	number、string、function	坐标轴最小最大值
splitNumber	number	坐标轴的分割段数
interval	number	强制设置坐标轴分割间隔

5.5.1 axisLine坐标轴轴线相关设置

show：是否显示
onZero：X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
onZeroAxisIndex：当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上。
lineStyle：基础配置

5.5.2 axisTick坐标轴刻度相关设置

show：是否显示
interval：坐标轴刻度的显示间隔，在类目轴中有效
inside：坐标轴刻度是否朝内，默认朝外。
length：坐标轴刻度的长度。
lineStyle：刻度线的样式设置。

5.5.3 axisLabel坐标轴刻度标签的相关设置

同textStyle配置相同

5.6 yAxis直角坐标系grid中的y轴

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
data	Array	x轴的标题数据
nameTextStyle	Object	坐标轴名称的文字样式，同textStyle
axisLine	Object	坐标轴轴线相关设置。同xAxis
axisTick	Object	坐标轴刻度相关设置，同xAxis
axisLabel	Object	坐标轴刻度标签的相关设置。同xAxis
nameRotate	number	坐标轴名字旋转，角度值。
min、max	number、string、function	坐标轴最小最大值
splitNumber	number	坐标轴的分割段数
interval	number	强制设置坐标轴分割间隔

5.7 series具体图形配置

数据源的配置，配置类型为数组对象（Array），根据每个对象type来配置图形样式。

其他配置详情请见官网文档

5.7.1 type图形类型

line：折线/面积图；
bar：柱状图；
pie：饼图；
scatter：散点图（气泡图）；
effectScatter：带有涟漪特效动画的散点（气泡）图;
radar：雷达图；
tree：树图；
map：地图；
gauge：仪表盘；
graph：关系图；
lines：路径图；
sunburst：旭日图；
…

5.7.2 图形通用配置

不同图形都要特定的属性配置，这里就不一一详细讲述。后面会根据特定图形专门讲解，下面主要介绍通用了一些属性配置；

属性名	属性类型	属性详情
type	String	展示图表类型
name	String	系列名称，用于tooltip的显示
data	Array	系列中的数据内容数组。数组项通常为具体的数据项。
xAxisIndex	Number	使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex	Number	使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
label	Object	图形上的文本标签，可用于说明图形的一些数据信息文档链接
itemStyle	Object	折线拐点标志的样式。同textStyle
lineStyle	Object	线条样式。文档链接
areaStyle	Object	区域填充样式。设置后显示成区域面积图。文档链接

5.8 tooltip提示框组件

用于鼠标滑过显示提示信息。

其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
trigger	String	触发类型
showContent	Boolean	是否显示提示框浮层
alwaysShowContent	Boolean	是否永远显示提示框内容
triggerOn	String	提示框触发条件
position	String、Array、Function	提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
formatter	String、Function	提示框内容格式器
valueFormatter	String、Function	tooltip中数值部门的格式化回调函数
textStyle	Object	提示框浮层的文本样式，同TextStyle
backgroundColor	String	提示框背景颜色

5.9 toolbox工具栏

工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

其他配置详情请见官网文档

属性名	属性类型	属性详情
show	Boolean	是否显示
orient	String	工具栏icon的布局朝向
itemSize	Number	工具栏icon的大小
showTitle	Boolean	是否在鼠标 hover 的时候显示每个工具 icon 的标题。
feature	Object	各工具配置项。文档链接
iconStyle	Object	公用的 icon 样式设置。文档链接
tooltip	Object	工具箱的 tooltip 配置，配置项同 tooltip
top、right、bottom、right	String	文本距离容器四侧的位置