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）是指：一组数值以及他们映射成的图。 包含的要素至少有：
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
网友评论