echarts学习笔记

2020-12-22 本文已影响0人 Scincyc

echarts入门

echarts官网：https://echarts.apache.org

1. echarts的下载/引入

GitHub | npm | 在线定制 3种方式

2. echarts 的绘图步骤

建立 dom 容器
引入 ECharts
实例化 echarts（echarts.init方法）
建立图表配置项
显示图表（setOption方法）

run start

<head>
 <!-- 2\. -->
 <script src="echarts.min.js"></script>
</head>
<!-- 1\. -->
<body>
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 // 3.
 var myChart = echarts.init(document.getElementById('main'));
 // 4.
 var option = {
 title: {}
 ...
 };
 // 5.
 myChart.setOption(option);
 </script>
</body>
</pre>

要知道 echarts 的图表样式是通过配置项来设置的，坐标系中不同轴向的数据对应关系，echarts 图表的样式有哪些

3. 系列和组件

3.1 系列

在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。包含的要素至少有：

一组数值
图表类型

至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）......
其他参数

image

3.2 组件

echarts 中各种内容，被抽象为“组件”。可以理解为：系列是专门绘制“图”的组件。

在 option 中声明了各个组件（包括系列），option 每个属性是一类组件。option 表述了：数据、数据如何映射成图形、交互行为。

image

4. echarts常用组件

4.1 标题 title

参数设置：

主标题 text
副标题 subtext
位置 left
主标题样式 textStyle
副标题样式 subtextStyle
可见性 show

4.2 图例 legend

图例legend 适用于不同系列的数据过滤，它需要与series 搭配使用

4.3 工具栏 toolbox

参数设置：

保存为图片 saveAsImage
配置项还原 restore
数据视图工具 dataView
数据区域缩放 dataZoom
动态类型切换 magicType

4.4 提示框 tooltip

提示框触发方式 trigger：

item 图形触发，主要在散点图，饼图等无类目轴的图表中使用
axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
none 什么都不触发

4.5 坐标轴 xAxis yAxis

name 坐标轴名称
data 类目数据
y 轴的分割设置：
- splitNumber 分割段数
- interval 强制设置坐标轴分割间隔
- minInterval 坐标轴最小间隔
- maxInterval 坐标轴最大间隔

4.6 系列列表 series

列表类型 type
系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
数据 data
标记点 markPoint
标记线 markLine

series 中系列数据的维度：

xAxis: {
 name: 'x',
 //0,1,2
 data: ["html","css","js"]
},
yAxis: {
 name: 'y',
}, 
 series: [{
 type: "bar",
 //data: [300, 200, 400]
 data: [
 //x,y
 [0,300],
 [1,200],
 [2,400]
 ],
 }]

4.7 标记点 markPoint 标记线 markLine

data [] 标记的数据数组
- 标记的数据{}
  - name 名称
  - type
    - 最小 min
    - 最大 max
    - 平均值 average
  - coord [x,y] 坐标位
  - symbolOffset 标记偏移
  - symbolSize 标记大小
  - value 最定制标记内容
  - symbol 标记图形包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' ,url

5. echarts常用图表

5.1 折线图 line

用法：折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。

5.2 饼图 pie

用法：主要用于展现不同类别数值相对于总数的占比情况。（当各类别数据占比较接近时，建议选用柱状图或南丁格尔玫瑰图）

南丁格尔图：

1608109096927.png

5.3 散点图 scatterK

用法：通常用来识别两个变量之间的相关性。（或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效）

1608109229441.png

例如：某个班级学生身高和体重的分布状况。

气泡图：散点图可以将一个对象的两个变量映射到x、y 位置上。如果此对象还有一个变量，那就可以映射到散点的大小上，这就变成了气泡图。

1608109239088.png

5.4 K线图 candlestick

用法：通常用于表示股票走势。

1608109316096.png

1608109574840.png

5.5 雷达图 radar

雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度。

用法：适合对比变量在数据集内的高低，比如产品性能、排名、评估等。

例如下图，比较六个方面在上周预算、开销中的情况。只有玩具一项的支出超出了预算。使用雷达图，哪些方面超出或不足变得一目了然了。

1608109955413.png

5.6 仪表盘 gauge

用法：适合表示量的变化，如速度、体积、温度、进度、完成率、满意度等。

1608110238962.png

5.7 地图 map

用法：主要用于地理区域数据的可视化。

ECharts 中提供了两种格式的地图数据：

js 文件，用 script 标签引入，引入后会自动注册地图名字和数据。
JSON 文件，需要通过 AJAX 异步加载后手动注册，注册方法是echarts.registerMap()。

5.7.1 用 script 标签引入js 文件的地图

实现步骤：

（1）在引入echarts 后，引入地图的js 文件

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

（2）设置系列图表的样式为map，引入china.js 里已经注册的地图

series: [{            
 type: 'map',
 map: 'china'
}]

5.7.2 用JSON 文件绘制地图

fetch('../js/China.json')
 .then((res) => res.json())
 .then(data => {
 echarts.registerMap('china', data);
 const myChart = echarts.init(document.getElementById('main'));
 const option = {
 series: [{
 type: 'map',
 map: 'china'
 }]
 };
 myChart.setOption(option);
 })

5.8 地理坐标系组件 geo

geo 是地理坐标系组件，它也可以画地图。geo 和 map 的区别在于，geo 支持在地理坐标系上绘制散点图，线集。

6. 高级使用

6.1 多坐标轴

直角坐标系 grid 中的y轴，一般情况下单个 grid 组件最多只能放左右两个y轴。

多坐标轴的设置方法：

（1）在yAxis 中写入两组数据，统一行间距；

（2）在series 中设置数据时，使用 yAxisIndex 属性设置其与哪个y轴相关联；

1608279033937.png

6.2 异步数据

对于请求数据的方式，ajax、fetch都可以。

数据的更新有两种思路：

请求到数据后，setOption()；
先setOption()，也就是有什么配置什么，请求到数据后，再追加配置；

6.3 数据集 dataset

从ECharts4开始有的，用于数据管理。

6.3.1 数据集的使用：支持二维数组、对象数组格式

1608279163578.png

dataset: {
 source: [
 ['例子', '人数', '难度'],
 ['html', 200, 300],
 ['css', 210, 330],
 ['js', 100, 200]
 ],
 series: [
 {type: 'bar'},
 {type: 'bar'},
 ],
}
 dataset: {
 source: [
 {'例子': 'html', '人数': 200，'难度': 300},
 {'例子': 'css', '人数': 210，'难度': 330},
 {'例子': 'js', '人数': 100，'难度': 200},
 ]
}

6.3.2 数据集的行列映射

seriesLayoutBy：行列映射方式

column：基于列映射（默认）；

160827961381422.png

row：基于行映射

160827962581122.png

6.3.3 数据集的维度映射

dimensions：用于定义 series.data 或者 dataset.source 的每个维度的信息。

如果在dataset.source 里指定了dimensions，ECharts则不会自动从 dataset.source 的第一行/列中获取维度信息。

dimensions的2种书写位置：

dataset: {
 dimensions: ['例子', '人数', '难度']，
 source: [
 ['html', 200, 300],
 ['css', 210, 330],
 ['js', 100, 200]
 ]
}
series: [
 {
 type: 'bar',
 dimensions: ['例子', '人数', '难度']
 },
 {type: 'bar'},
]

6.3.4 数据集的编码映射

encode 可以定义 data 的哪个维度被编码成什么。

如：大前端的维度映射到x 轴，人数的维度映射到y 轴。x 轴为类目轴，y 轴为数据轴。

dataset: {
 source: [
 ['大前端','人数', '难度'],
 ['html',  200,   250],
 ['css',   100,   150]
 ]
},
series: [
 {
 type: 'bar',
 encode: {
 x: '大前端',
 y: '人数'
 }
 }
]

6.4 区域缩放 dataZoom

作用：概览整体，观察细节。

dataZoom 组件的类型：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

dataZoom滑动条效果：

1608281083310.png

6.5 视觉映射 visualMap

该组件用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。（visualMap 以前叫dataRange）

visualMap 组件有两种类型：continuous 连续型和 piecewise 分段型；

1608280973170.png

6.6 事件

6.6.1 事件监听

ECharts 使用on绑定事件，参数为小写的事件名称和回调函数；

myChart.on('click', function (params) {
});

6.6.2 鼠标事件类型

ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

所有的鼠标事件包含参数 params，如被点击的图形信息 params.componentType 。

6.6.3 监听组件交互事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件。

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
 // 获取点击图例的选中状态
 let isSelected = params.selected[params.name];
});

6.7 富文本标签

富文本标签，就是内容丰富的文本标签。在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：

1608280460760.png

对比：

（1）将数据写在每个series 系列中的方法，有以下缺陷：

不适合数据处理；
不利于多个系列共享一份数据；
不利于基于原始数据进行图表类型、系列的映射安排；

（2）dataset 的优点：

基于数据，设置映射关系，形成图表；
数据和配置分离，便于单独管理；
数据可以被多个系列或者组件复用；
支持更多的数据的常用格式，例如二维数组、对象数组等；

注：在数据加载的过程中，还可以使用loading

显示 loading：showLoading()
隐藏 loading：hideLoading()

1608279093801.png