关于前端:Echarts使用总结

一. 同轴/非同轴问题

引出背景：须要同时展现多个系列的数据（例如多个监测指标的监测数据），且这些多个系列的数据处在不同的数量级，体现出的直观景象为数量级偏小的在图形中的展现无奈达到预期成果

解决思路：应用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

应用数据集治理数据的长处：

1. 贴近数据可视化常见思维形式：（I）提供数据，（II）指定数据到视觉的映射，从而造成图表
2. 将数据与配置拆散，便于管理
3. 不便数据复用
4. 反对更多的数据格式：对象数组、二维数组

罕用设定

数据到图形的映射：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示意, 具体表现为在折线图中该点断开