使用Echarts绘制自动播放的时间轴排名图表时间轴动态排名

最新推荐文章于 2024-12-13 16:00:00 发布

原创

最新推荐文章于 2024-12-13 16:00:00 发布 · 2.4k 阅读

标签

#可视化 #js

本文介绍如何利用Echarts库创建一个自动播放的时间轴排名图表，展示2010-2019年各省年度GDP动态变化。步骤包括新建HTML文件、引入echarts.js、设置图表宽高、初始化实例、加载数据、配置播放速度和颜色。通过运行代码，可以在浏览器中查看到效果。

本实验所用数据来自于国家数据网站，网址为http://data.stats.gov.cn/easyquery.htm?cn=E0103。
所用数据为2010-2019年各省年度GDP，如下图所示：
动态图表制作过程
(1)本动态图表使用Echarts绘制。首先新建一个HTML文件。

在这里插入图片描述
(2)引入 echarts.js。

(3)设置动态图表的宽度和高度，并初始化echarts实例。
在这里插入图片描述

(4)加入数据。
在这里插入图片描述

(5)设置动态图表的播放速度和颜色。
在这里插入图片描述

(6)完成后使用浏览器打开HTML文件即可看到动态图表。
在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2010-2019各省GDP排名</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1080px;height:720px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        var years = ['2010', '2011', '2012','2013', '2014', '2015','2016', '2017', '2018', '2019'];
 var jdData = [
     ['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
     ['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
     ['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
	'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
	'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
	     ['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
	'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区