Echarts 5 瞎入门指南-3

timeline组件

Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。
timeline 和其他场景有些不同，它需要操作『多个option』
直接看demo

创建时间线option

 const baseOption = {
            backgroundColor: '#fff',
            timeline: {
                axisType:'category', //类目轴
                autoPlay: true,
                loop: true,
                playInterval: 1000, //间隔时间
                data: ['北齐', '南庆', '东夷城']
            },
            grid: {
                top: 80,
                left: 80,
            },
            xAxis: {
                type: 'category',
                data: ['谋士', '武将', '士兵'],
                splitLine: {show: false}
            },
            yAxis: {
                type: 'value',
                name: '人数',
                splitLine: {show: false}
            }
        }

创建普通option 文档叫ECUnitOption 为了方便也叫做 switchableOption

    const options = [
        {
            series: [
                {
                    name: '8品高手',
                    type: 'bar',
                    data: [178, 156, 600]
                }
            ]
        },
        {
            series: [
                {
                    name: '8品高手',
                    type: 'bar',
                    data: [220, 650, 1500]
                }
            ]
        },
        {
            series: [
                {
                    name: '8品高手',
                    type: 'bar',
                    data: [152, 150, 300]
                }
            ]
        }
    ]

初始化渲染

<template>
     <div class="chart" ref="chart"></div>
</template>
    
<script>
    import * as echarts from 'echarts';
    let chart = null;
    
    ~function init() {
        const option = {
                baseOption,
                options
            }
            
        chart = echarts.init(this.$refs.chart)
        chart.setOption(option)
    }()
</script>

<style scoped>
    .chart {
        width: 8rem;
        height: 6rem;
    }
</style>

效果图

replaceMerge 属性

这个属性官方原话是：初始化的时候，对应于当前时间的那个 switchableOption 会被合并（merge）到 baseOption，形成 finalOption。而每当时间变化时，对应于新时间的 switchableOption 会被合并（merge）到finalOption。并且有两种合并策略

常见需要使用 replaceMerge 的地方是，如果需要下一个时间刻度的 series 完全替换上一个时间刻度的 series 而不进行任何 merge ，可以设置 replaceMerge: 'series'，并且两个时间刻度的 series id 不相同或者没有 id 。

还是直接看效果吧

const baseOption = {
            backgroundColor: '#fff',
            timeline: {
                axisType:'category',
                autoPlay: true,
                loop: true,
                playInterval: 1000, //间隔时间
                data: ['北齐', '南庆', '东夷城'],
                
                //加这一行测试replaceMerge
                replaceMerge: 'series',
            }         
        };

replaceMerge: 'series' 效果图

效果差距还是很明显的

replaceMerge 的值可以是一个组件的 mainType，例如 replaceMerge: 'xAxis'。也可以是 mainType 数组，例如 replaceMerge: ['xAxis', 'series']。感兴趣的可以去尝试下

时间轴

日常开发中我们需求的时间轴可能跟官方默认提供的差距比较大，需要我们手动修改

    timeline: {
            axisType:'time', //时间轴
            autoPlay: true,
            loop: true,
            playInterval: 1000, //播放间隔时间
            data: ['2021-1', '2021-2', '2021-3'],
            symbol: 'diamond',
            //时间轴下面的文字
            label: {
                position: 20,  //指定文字和时间轴距离
                rotate: 15, 旋转
                formatter: '{yyyy}-{MM}' //注意格式化时间只适合时间轴, 格式化后 2021-01
                //formatter: (value, index) => value + '℃'
            },
            //设置控制按钮（播放，前进，后退）
            controlStyle: {
                showPlayBtn: false,
                //itemSize: 24, 控制按钮尺寸
            }
        }

首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 formatter 支持了时间模版（例如 {yyyy}-{MM}-{dd}）

最后的轻语

`凡生于世, 有自由的权利。 知礼义，守仁心，不以钱财论成败,不因权势而屈从，
同情弱小，痛恨不平，危难时坚心志，无人处常自省`