一. 同轴/非同轴问题
引出背景：需要同时展示多个系列的数据（例如多个监测指标的监测数据），且这些多个系列的数据处在不同的数量级，表现出的直观现象为数量级偏小的在图形中的展示无法达到预期效果
解决思路：使用echarts多Y轴的解决方案，在单Y轴/多Y轴之间进行切换
单Y:
yAxis: {
type: 'value',
axisLine: {
show: true,
},
},
----------
多Y:
yAxis: [{
type: 'value',
min: 0,
max: 250,
position: 'right'|'left',
axisLine: {
show: true,
},
},.....]
/* 注意点：
1. 多Y轴时显式设置min/max值，根据实际需求设置position（可采取左右交叉设计）
2. 在单Y轴/多Y轴间进行切换时，注意及时清除缓存，用好echartInstance.clear(), echartInstance.setOption(opt, opts)等api
3. 注意配置项特殊情况的处理（series系列数据为空时）
*/
二. 双标轴刻度一致问题
以双y轴为例, 导致刻度不一致的原因:
刻度在显示时，分割段数不一样(为达到显示效果)，导致左右的刻度线不一致，不能重合在一起
解决方案:
使用 interval 配合 min、max 强制设定刻度划分，实现： （1）固定两边的分隔的段数 splitNumber （2）分别求出两边Y轴的最大值max和最小值min(如果有多个系列的数据展示，则需计算多个系列数据)，根据max和min之差去除以分隔的段数， 分别算出两边Y轴的分隔间隔
yAxis: [
{
name: '巡检里程(m)',
type: 'value',
nameLocation: 'middle',
nameGap: 45,
min: Min1,
max: Max1,
splitNumber: 5,
interval: (Max1 - Min1) / 5,
axisTick: {
show: false,
},
},
{
name: '巡检时长(min)',
nameLocation: 'middle',
type: 'value',
nameGap: 40,
min: Min2,
max: Max2,
splitNumber: 5,
interval: (Max2 - Min2) / 5,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
三. dataset数据管理
(1) dataset
使用数据集管理数据的优点：
- 贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表
- 将数据与配置分离，便于管理
- 方便数据复用
- 支持更多的数据格式：对象数组、二维数组
常用设定
数据到图形的映射：seriesLayoutBy、encode
数据的维度：dimension
dataset不支持的场景：一些特殊的图表或者大数据量的渲染
(2) series.data
当只有一个轴为类目轴（axis.type 为 'category'）的时候，简化用一个一维数组表示
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]
---值与轴类型的关系---
数值轴：(number|string)
类目轴：(类目的索引|类目名称)
时间轴：(时间戳|时间的字符串格式|Date 实例)
特殊的：数据不存在（不包含0）可以用null、undefined、“-”、NaN表示, 具体表现为在折线图中该点断开
