问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

2024年中国31省市GDP数据可视化

创作时间:
作者:
@小白创作中心

2024年中国31省市GDP数据可视化

引用
CSDN
1.
https://blog.csdn.net/2501_90363343/article/details/145305675

本文将通过ECharts库实现中国地图上的散点图和柱形图展示,以可视化方式呈现2024年中国31个省市的GDP数据。

散点图展示31省份GDP数据

数据准备

var data = [
  {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: '2024年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);  
}  

效果图

上图可以清晰看出各省份GDP的多少,另外在GDP排名前五名的省份加了一些效果,更加直观。鼠标移到具体省份可以查看具体数值。

横向柱形图展示31省份GDP数据

具体思路

首先从ECharts上找到相应实例,修改数据即可。

实例地址:ECharts横向柱状图

实例效果:

折线图展示31省份GDP增速

具体思路

首先从ECharts上找到相应实例,修改数据即可。

实例地址:ECharts折线图

实例效果:

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号