关于前端:Echarts使用总结

2次阅读

共计 1507 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

(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 示意, 具体表现为在折线图中该点断开

正文完