Echarts数据可视化第6章带有时间轴的复杂动态可视化案例 6.1 带时间轴的可视化图 6.2 可视化制作全流程

心已赠人 2024-03-25 20:45 47阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第6章 带有时间轴的复杂动态可视化案例
         *   *  6.1 带时间轴的可视化图
             *  6.2 可视化制作全流程

> Echarts数据可视化：入门、实战与进阶

#### 第6章 带有时间轴的复杂动态可视化案例 ####

##### 6.1 带时间轴的可视化图 #####

动态可视化图标，它可以很形象的展示随着时间轴变化，排行榜上各项数据的变化。

其实在之前那么多的栗子中我们已经可以发现，一幅完整的可视化图是由很多部分像搭积木那样搭建起来的，所以学习Echarts 绘图，擅长对可视化图进行拆解分析很重要。

##### 6.2 可视化制作全流程 #####

首先需要准备数据部分，因为要展示的是每天的排名数据，所以需要将商品名称和累计销量对应起来。

var rankData = [{
        
        'date': '2020-03-14',
        'category': '2020-03-14',
        'data': [
            {
        'name': 'A商品', 'value': 6509},
            {
        'name': 'B商品', 'value': 4791},
            {
        'name': 'C商品', 'value': 3447},
            {
        'name': 'D商品', 'value': 2906},
            {
        'name': 'E商品', 'value': 2611},
        ]
    },
        {
        
            'date': '2020-03-13',
            'category': '2020-03-13',
            'data': [
                {
        'name': 'A商品', 'value': 4874},
                {
        'name': 'B商品', 'value': 3662},
                {
        'name': 'D商品', 'value': 2431},
                {
        'name': 'C商品', 'value': 2160},
                {
        'name': 'E商品', 'value': 2101},
            ]
        },
        {
        
            'date': '2020-03-12',
            'category': '2020-03-12',
            'data': [
                {
        'name': 'A商品', 'value': 3751},
                {
        'name': 'B商品', 'value': 3398},
                {
        'name': 'D商品', 'value': 2129},
                {
        'name': 'C商品', 'value': 2110},
                {
        'name': 'E商品', 'value': 2088},
            ]
        },
        {
        
            'date': '2020-03-11',
            'category': '2020-03-11',
            'data': [
                {
        'name': 'A商品', 'value': 2642},
                {
        'name': 'B商品', 'value': 2332},
                {
        'name': 'D商品', 'value': 1095},
                {
        'name': 'C商品', 'value': 1075},
                {
        'name': 'E商品', 'value': 1063},
            ]
        },
        {
        
            'date': '2020-03-10',
            'category': '2020-03-10',
            'data': [
                {
        'name': 'B商品', 'value': 1345},
                {
        'name': 'A商品', 'value': 1045},
                {
        'name': 'D商品', 'value': 870},
                {
        'name': 'C商品', 'value': 696},
                {
        'name': 'E商品', 'value': 640},
            ]
        },
    ];

这个数据是一个列表，其中有很多字典，每个字典代表了某天的数据情况，字典包含几个部分，分别是日期date，分类category和具体数据data，其中data内部 又包含了每个商品的累计销量情况。

然后再定义一些其他内容

像标题(title)固定、以及播放时可视化动态变化的时间间隔(playInterval)。

因为每天的销售数量已经按照降序排列，之后的两层for 循环的目的是在每天排行榜上对应的位置使用对应的颜色。

再下来就是设置option 内容了

// 基础设置
    var option = {
        
        baseOption: {
        
            animationDurationUpdate: playInterval * 1.5, //数据更新动画的时长
            animationEasingUpdate: 'quinticInOut', //数据更新动画的缓动效果
            timeline: {
         //时间轴相关参数
                show: false, //隐藏时间轴
                axisType: 'category', //轴的类型：类别型
                orient: 'vertical', //摆放方式：竖直放置
                autoPlay: true, //自动播放
                loop: false, //表示是否循环播放
                playInterval: playInterval, //表示播放的速度（跳动的间隔），单位毫秒（ms）
                left: null, //timeline组件离容器左侧的距离
                right: 30, //timeline组件离容器右侧的距离
                top: 330, //timeline组件离容器上侧的距离
                bottom: 100, //timeline组件离容器下侧的距离
                height: null,
                label: {
        
                    normal: {
        
                        show: true, //不显示轴线
                        color: '#ccc', //时间线的颜色
                    }
                },
                checkpointStyle: {
         //当前项的图形样式，时间轴上显示
                    symbol: 'none', //标记的图形样式
                    color: '#bbb', //颜色
                    borderColor: '#777', //边框颜色
                    show: false, //不显示
                    borderWidth: 1 //边框宽度
                },
                controlStyle: {
         //『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。
                    showNextBtn: false, //是否显示『前进按钮』
                    showPrevBtn: false, //是否显示『后退按钮』
                    normal: {
        
                        color: '#666',
                        show: false,
                        borderColor: '#666'
                    },
                    emphasis: {
         //高亮状态相关设置
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                data: rankData.map(function (ele) {
         //对列表中每个元素拿data部分
                    return ele.date
                })
            },
            title: [{
         //标题相关设置
                left: 'center',
                top: '3%',
                textStyle: {
        
                    fontSize: 25,
                    color: 'rgba(121,121,121, 0.9)'
                }
            }, {
        
                left: 'center',
                top: '5%'
            }],
            grid: [{
         //网格相关设置
                left: '20%',
                right: '20%',
                top: '12%',
                height: 'auto',
                bottom: '25%'
            }],
            xAxis: [{
        }],
            yAxis: [{
        }],
            series: [{
         //图表相关设置
                id: 'bar',
                type: 'bar', //条形图
                barWidth: '80',
                tooltip: {
        
                    show: false
                },
                label: {
        
                    normal: {
        
                        show: true,
                        position: 'right'
                    }
                },
                data: []
            }]
        },
        options: []
    };

这一部分option 主要是固定的部分，即不会随着时间和数据内容变化的部分， 主要包括动画效果设置、时间轴设置(timeline)、标题设置(title)、网格设置(grid)、x轴设置(xAxis)、y轴设置(yAxis)、数据设置(series)

由于是动态可视化，所以每次显示的内容除了上面固定不动的地方，那肯定还有变化的部分， 主要是与数据相关的展示。

其实上面的代码中主要是完成以循环的方式将数据加入到可视化模板代码中，用到option 的push 方法以加入数据相关的内容。

所有代码完成后。

最终渲染效果

![在这里插入图片描述][5bc6f78f14824c76873eeb21ccf7401b.gif_pic_center]

[5bc6f78f14824c76873eeb21ccf7401b.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2c687c0ab6e5458285b03ca7c602d1b0.png