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/[email protected]/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 定义一个页面展示图表的区域
<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>
<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：全局的字体样式配置；
- color：文字颜色；
- fontStyle：文字字体风格；
- fontWeight：文字字体粗细；
- fontFamily：文字字体；
- fontSize：文字字体大小；
- lineHeight：行高；
- width：文本显示宽度；
- height：文本显示高度；
- …其他配置请见官网文档：
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 | 文本距离容器四侧的位置 |