2020年31省市GDP数据可视化

其他 2021-02-11 10:11:35 阅读次数: 0

近日，中国新闻网发布新闻：31省份2020年GDP出炉 20省份GDP增速跑赢全国
下表是新闻里给出的数据表：
在这里插入图片描述
光从表格看可能不太直观，于是我想着调用echarts接口来实现数据可视化。

1、在中国地图上显示每个省份的GDP。

具体思路：

首先需要从echarts官网找到相关实例，然后我们需要31个省份的经纬度坐标，最终把数据填入，修改一下代码即可。
实例地址：echarts中国地图
实例效果：
在这里插入图片描述
左边是js代码，右边是效果图，可以点击download下载整个代码下来自行修改。

完整代码：

<!DOCTYPE html>
<!-- 作者：......快乐的√4
 原文链接：https://blog.csdn.net/qq_44809707/article/details/113461038
 -->
<html style="height: 100%">
   <head>
    <meta charset="UTF-8">
    <title>2020年31省份GDP展示</title>
    </head>
   <body style="    height: 100%;
    background-color: #10aeb5;">
       <div id="container" style="font-family:'微软雅黑';
    width:1500px;
    height:800px;
    left: 50%;
    margin-top:30px;
    margin-left: -750px;
    margin-bottom:20px;background: #f8f9fa;"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Fr1Ob4gNd0Fc5ufx12XbNdKiIT7mb89c"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
           var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
     
     };
option = null;
var data =[
 {
     
     'name': '上海', 'value': 38700.58},
 {
     
     'name': '北京', 'value': 36102.6},
 {
     
     'name': '四川', 'value': 48598.8},
 {
     
     'name': '安徽', 'value': 38680.6},
 {
     
     'name': '广东', 'value': 110760.94},
 {
     
     'name': '广西', 'value':22156.69},
 {
     
     'name': '新疆', 'value': 13797.58},
 {
     
     'name': '江苏', 'value': 102719.0},
 {
     
     'name': '江西', 'value': 25691.5},
 {
     
     'name': '河北', 'value': 36206.9},
 {
     
     'name': '浙江', 'value': 64613},
 {
     
     'name': '湖北', 'value': 43443.46},
 {
     
     'name': '湖南', 'value': 41781.49},
 {
     
     'name': '甘肃', 'value': 9016.7},
 {
     
     'name': '福建', 'value': 43903.89},
 {
     
     'name': '辽宁', 'value': 25115},
 {
     
     'name': '贵州', 'value': 17826.56},
 {
     
     'name': '海南', 'value': 5532.39},
 {
     
     'name': '河南', 'value': 54997.07},
 {
     
     'name': '黑龙江', 'value': 13698.5},
 {
     
     'name': '吉林', 'value': 12311.32},
 {
     
     'name': '内蒙古', 'value': 17360},
 {
     
     'name': '宁夏', 'value': 3920.55},
 {
     
     'name': '山东', 'value': 73129.0},
 {
     
     'name': '山西', 'value': 17651.93},
 {
     
     'name': '陕西', 'value': 26181.86},
 {
     
     'name': '天津', 'value': 14083.73},
 {
     
     'name': '西藏', 'value': 1902.74},
 {
     
     'name': '云南', 'value': 24521.90},
 {
     
     'name': '重庆', 'value': 25002.79},
 {
     
     'name': '青海', 'value': 3005.92},
 ]
var geoCoordMap = {
     
     
    '湖北':[114.31667,30.51667],
    '广东':[113.23333,23.16667],
    '北京':[116.41667,39.91667],
    '上海':[121.48,31.22],
    '辽宁':[123.38,41.8],
    '江西':[115.90000,28.68333],
    '四川':[104.06,30.67],
    '安徽':[117.27,31.86],
    '广西':[108.33,22.84],
    '新疆':[87.68,43.77],
    '江苏':[118.78,32.04],
    '河北':[114.48,38.03],
    '浙江':[120.19,30.26],
    '湖南':[113,28.21],
    '甘肃':[103.82,36.07],
    '福建':[119.28000,26.08],
    '贵州':[106.71,26.57],
    '海南':[110.35,20.02],
    '河南':[113.65,34.76],
    '黑龙江':[126.63,45.75],
    '吉林':[125.35,43.88],
    '内蒙古':[111.65,40.82],
    '宁夏':[106.27,38.47],
    '山东':[117,36.65],
    '山西':[112.53,37.87],
    '陕西':[108.95,34.27],
    '天津':[117.2,39.13],
    '西藏':[91.11,29.97],
    '云南':[102.73,25.04],
    '重庆':[106.54,29.59],
    '青海':[101.74,36.56],
};

var convertData = function (data) {
     
     
    var res = [];
    for (var i = 0; i < data.length; i++) {
     
     
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
     
     
            res.push({
     
     
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
     
     
    title: {
     
     
        text: '2020年31省份GDP数据',
        subtext: '数据来源：各地统计局',
        left: 'center'
    },
    tooltip : {
     
     
        trigger: 'item'
    },
    bmap: {
     
     
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: false,
        enableMapClick: false,
   },

    series : [
        {
     
     
            name: '地区生产总值(亿元)',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function (val) {
     
     
                return val[2] / 3000;
            },
            encode: {
     
     
                value: 2
            },
            label: {
     
     
                formatter: '{b}',
                position: 'right',
                show: true
            },

            itemStyle: {
     
     
                color: 'purple'
            },
            emphasis: {
     
     
                label: {
     
     
                    show: false
                }
            }
        },
        {
     
     
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data.sort(function (a, b) {
     
     
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
     
     
                return val[2] / 3000;
            },
            encode: {
     
     
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
     
     
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
     
     
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
     
     
                color: 'purple',
                shadowBlur: 10,
                shadowColor: '#333'
            },

            zlevel: 1
        }
    ]
};;
if (option && typeof option === "object") {
     
     
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

效果图：
在这里插入图片描述
上图可以清晰看出各省份GDP的多少，另外我在GDP排名前五名的省份加了一些效果，更加直观。鼠标移到具体省份可以查看具体数值。
在这里插入图片描述

在这里插入图片描述
补充说明：

每个数据都是我自己打上去的，如果有错误，欢迎指正。另外有些地区的GDP较小，所以在地图上的点半径可能几乎不显示。（这个你也可以自己改一下半径）

2、横向柱形图显示31省份GDP数据

具体思路：
首先从echarts上找到相应实例，修改数据即可。
实例地址：echarts横向柱状图
实例效果：
在这里插入图片描述
上面有两个柱状图，删掉一个即可。

完整代码：

<!DOCTYPE html>
<!-- 作者：......快乐的√4
 原文链接：https://blog.csdn.net/qq_44809707/article/details/113461038
 -->
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Fr1Ob4gNd0Fc5ufx12XbNdKiIT7mb89c"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
     
     };
option = null;
option = {
     
     
    title: {
     
     
        text: '2020年31省市GDP数据',
        subtext: '数据来自各地统计局',
        left:'center'
        
    },
    tooltip: {
     
     
        trigger: 'axis',
        axisPointer: {
     
     
            type: 'shadow'
        }
    },
    legend: {
     
     
        data:['地区生产总值（亿元）'],
        left:'right'
    },
    grid: {
     
     
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
     
     
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
     
     
        type: 'category',
        data: [
'广东',
'江苏',
'山东',
'浙江',
'河南',
'四川',
'福建',
'湖北',
'湖南',
'上海',
'安徽',
'河北',
'北京',
'陕西',
'江西',
'辽宁',
'重庆',
'云南',
'广西',
'贵州',
'山西',
'内蒙古',
'天津',
'新疆',
'黑龙江',
'吉林',
'甘肃',
'海南',
'宁夏',
'青海',
'西藏',
]
    },
    series: [

        {
     
     
            name: '地区生产总值（亿元）',
            type: 'bar',
            data: [
110760.94,
102719.0,
73129.0,
64613,
54997.07,
48598.8,
43903.89,
43443.46,
41781.49,
38700.58,
38680.6,
36206.9,
36102.6,
26181.86,
25691.5,
25115,
25002.79,
24521.90,
22156.69,
17826.56,
17651.93,
17360,
14083.73, 
13797.58,
13698.5,
12311.32,
9016.7,
5532.39,
3920.55,
3005.92,
1902.74,
]
        }
    ]
};
;
if (option && typeof option === "object") {
     
     
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

效果图：
在这里插入图片描述
3、折线图展示31省份GDP增速

具体思路：
首先从echarts上找到相应实例，修改数据即可。
实例地址：echarts折线图
实例效果：
在这里插入图片描述

上面有多个折线图，只要一个即可。

完整代码：

<!DOCTYPE html>
<!-- 作者：......快乐的√4
 原文链接：https://blog.csdn.net/qq_44809707/article/details/113461038
 -->
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Fr1Ob4gNd0Fc5ufx12XbNdKiIT7mb89c"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
     
     };
option = null;
option = {
     
     
    title: {
     
     
        text: '2020年31省份GDP增速',
        subtext: '数据来自各地统计局',
        left:'center'
    },
    tooltip: {
     
     
        trigger: 'axis'
    },
    legend: {
     
     
        data: [ 'GDP增速(%)'],
        left:'right'
    },
    grid: {
     
     
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
     
     
        type: 'category',
        boundaryGap: false,
        data: [
'广东',
'江苏',
'山东',
'浙江',
'河南',
'四川',
'福建',
'湖北',
'湖南',
'上海',
'安徽',
'河北',
'北京',
'陕西',
'江西',
'辽宁',
'重庆',
'云南',
'广西',
'贵州',
'山西',
'内蒙古',
'天津',
'新疆',
'黑龙江',
'吉林',
'甘肃',
'海南',
'宁夏',
'青海',
'西藏',
]
    },
    yAxis: {
     
     
        type: 'value'
    },
    series: [

        {
     
     
            name: 'GDP增速(%)',
            type: 'line',
            stack: '总量',
            data: [
2.3,
3.7,
3.6,
3.6,
1.3,
3.8,
3.3,
-5.0,
3.8,
1.7,
3.9,
3.9,
1.2,
2.2,
3.8,
0.6,
3.9,
4.0,
3.7,
4.5,
3.6,
0.2,
1.5,
3.4,
1.0,
2.4,
3.9,
3.5,
3.9,
1.5,
7.8,
]
        }
    ]
};
;
if (option && typeof option === "object") {
     
     
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

效果图：
在这里插入图片描述
写在最后：

创作不易，觉得对你有帮助的可以一键三连哦。
转载请注明出处。

猜你喜欢

转载自blog.csdn.net/qq_44809707/article/details/113461038
今日推荐
周排行
Request请求对象
30s了解一个知识点之导入已存在的model项目
Redis安装及配置（基于5.0版本）
C语言学习笔记—指针
Xposed模块开发教程，该篇讲解通俗易懂，所以转发
Spring IOC registerBeanDefinition
[栈] leetcode 1019 Next Greater Node In Linked List
视频编码中 逐层扫描 (非交错扫描) 和 隔行扫描 (交错扫描) 的区别？
vcenter克隆虚拟机可能修改配置
HDU 1034(传递糖果 模拟)
每日归档
更多
2025-01-02(0)
2025-01-01(0)
2024-12-31(0)
2024-12-30(0)
2024-12-29(0)
2024-12-28(0)
2024-12-27(0)
2024-12-26(0)
2024-12-25(0)
2024-12-24(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022