Echarts（三）：含有时间轴的可视化案例1

这是一篇小白的实现时间轴的可视化的笔记。

---

Timeline说明

timeline 需要操作多个option。

“我们把传入 setOption 第一个参数，称为 ECOption，称传统的 ECharts 单个 option 为 ECUnitOption。

当 timeline 和 media query 没有被设置时，一个 ECUnitOption 就是一个 ECOption。
当 timeline 或 media query 被使用设置时，一个 ECOption 由几个 ECUnitOption 组成。
ECOption 的各个根属性，形成一个 ECUnitOption，叫做 baseOption，它代表了各种默认设置。
options 数组每项，形成一个 ECUnitOption，我们为了方便也叫做 switchableOption，它代表了每个时间粒度对应的 option。”

简单来说：baseOption（根属性） 和一个 switchableOption（原子属性） 会用来计算最终的 finalOption，图表根据最终结果绘制的。

官网提供的例子：

myChart.setOption({
    // `baseOption` 的属性.
    timeline: {
        ...,
        // `timeline.data` 中的每一项，对应于 `options`
        // 数组中的每个 `option`
        data: ['2002-01-01', '2003-01-01', '2004-01-01']
    },
    grid: { ... },
    xAxis: [ ... ],
    yAxis: [ ... ],
    series: [{
        // 系列一的一些其他配置
        type: 'bar',
        ...
    }, {
        // 系列二的一些其他配置
        type: 'line',
        ...
    }, {
        // 系列三的一些其他配置
        type: 'pie',
        ...
    }],
    // `switchableOption`s:
    options: [{
        // 这是'2002-01-01' 对应的 option
        title: {
            text: '2002年统计值'
        },
        series: [
            { data: [] }, // 系列一的数据
            { data: [] }, // 系列二的数据
            { data: [] }  // 系列三的数据
        ]
    }, {
        // 这是'2003-01-01' 对应的 option
        title: {
            text: '2003年统计值'
        },
        series: [
            { data: [] },
            { data: [] },
            { data: [] }
        ]
    }, {
        // 这是'2004-01-01' 对应的 option
        title: {
            text: '2004年统计值'
        },
        series: [
            { data: [] },
            { data: [] },
            { data: [] }
        ]
    }]
});

在网上也看了很多实例，然后打算按照官网提供的范例自己写一次，第一次完成代码如下：

var option={
            //timeline
            timeline:{
                axisType: 'category',
                autoPlay: true,
                playInterval: 1500
            },
            //base
            baseOption:{
                animationDurationUpdate:playInterval*1.5,
                animationEasingUpdate:'quinticInOut',
                title:{
                    text:'一月到三月ABC商品销售情况',
                    subtext:'2021.5.29'
                    },
                tooltip: {
                    trigger: 'axis'
                },
                legend:{
                    data:['A','B','C']
                    },
                toolbox:{
                    feature:{
                        dataView:{readOnly:false},
                        saveAsImage: {}
                }},  
                 xAxis:[{
                    type:'category',
                    data:['A','B','C']
                }],
                yAxis:[{
                    name:'销售量',
                    type:'value',
                } ], 
                series: [{
                    // 系列一的一些其他配置
                    seriesLayoutBy: 'row',
                    type: 'bar'
                    
                }, {
                    // 系列二的一些其他配置
                    seriesLayoutBy: 'row',
                    type: bar'
                    
                }, {
                    // 系列三的一些其他配置
                    seriesLayoutBy: 'row',
                    type: bar'
                    
                }],            
            },
            options:[]
        };
        //timeline中的每一个
        options: [
        {// 'A' 对应 option
            title: {
                text: '一月份统计值'
            },
            series: [
                { data: [ 120,89,49]}]
        }, {// 'B' 对应 option
                title: {
                    text: '二月份统计值'
                },
                series: [
                { data:[53,78,99]} ]
        }, {// 'C' 对应 option
                title: {
                    text: '三月份统计值'
                },
                series: [
                    {data:[94,80,66] }]
            }               
        ];

可以说，非常短，精简到基本没有什么功能了，但是仍然运行不了。

参考了很多优秀的图。（eg一张好看的图 还是一张好看的图） 

error1：猜测和options有关。发现大部分，处理这里需要一个push方法。

for (var n = 0; n<yearlist.length; n++){
            option.options.push({
                title:{
                    show:true,
                    text:yearlist[n]+'年世界各国GDP (万亿美元)',
                    left: 'center',
                    textStyle:{
                        fontSize:24
                    }
                },
                series:[
                    {
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    encode:{
                        x:'year',
                        y:yearlist[n]
                    }
                    },
                ]
            });
        }

然后查了关于push的用法：

*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

*arrayObject.push(newelement1,newelement2,....,newelementX)

*位置：添加在数组的末尾。

*结果：数组长度改变；返回值是数组的长度。

。。。

这个时候我突然想到：

这说明base里面的options是一个列表，后期push向空列表里面添加东西。如果不用push的方法，只要在baseoption里面把全部option内容补全。

于是这个人把能用不能用的代码全删了……仍然运行不了。

但是，我把别人的options按照这个想法设置了，然后确实正常运行没有问题。

所以下一次再用push方法，现在偷懒把全部options在baseoption里面一次定义好。

error2：后半段option无误，说明问题在前面部分。

1.timeline里面没有data数据。（快被自己蠢死了）

2.animationDurationUpdate:playInterval*1.5,;animationEasingUpdate:'quinticInOut',这句话删掉就好了。(原理不明)

option={
            //timeline
            timeline:{
                axisType: 'category',
                autoPlay: true,
                playInterval: 1500,
                
                data:['一月','二月','三月']
            },
            //base
            baseOption:{

                title:{
                    text:'一月到三月ABC商品销售情况',
                    subtext:'2021.5.30'
                    },
                tooltip: {
                    trigger: 'axis'
                },
                legend:{
                    data:['A','B','C']
                    },
                  grid: {
                    left: '10%',
                    bottom: '15%',
                    containLabel: true
                },
                toolbox:{
                    feature:{
                        dataView:{readOnly:false},
                        saveAsImage: {}
                }},  
                 xAxis:[{
                    type:'category',
                    data:['A','B','C']
                }],
                yAxis:[{
                    name:'销售量',
                    type:'value',
                } ], 
                series: [{
                    id:'bar',
                    type:'bar',
                }],            
            },
           options: [
        {// 'A' 对应 option
            title: {
                text: '一月份统计值'
            },
            series: [
                {   seriesLayoutBy: 'row',
                    type: 'bar',
                    data: [ 120,89,49]}]
        }, {// 'B' 对应 option
                title: {
                    text: '二月份统计值'
                },
                series: [
                {   seriesLayoutBy: 'row',
                    type: 'bar',
                    data:[53,78,99]} ]
        }, {// 'C' 对应 option
                title: {
                    text: '三月份统计值'
                },
                series: [
                    {   seriesLayoutBy: 'row',
                        type: 'bar',
                        data:[94,80,66] }]
            }               
        ]
        };

成了。虽然确实非常的简陋。

框架总结。

var option={
     timeline:{
            },
     baseOption:{
            },
     options:[]
        };

---

これ以上，シャレてる時間はない〖没有多余时间可以浪费〗——Butter-Fly