2020年31省市GDP数据可视化

{‘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);

}

效果图：

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

补充说明：

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

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

具体思路：

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

实例地址：echarts横向柱状图

实例效果：

上面有两个柱状图，删掉一个即可。

完整代码：

效果图：

3、折线图展示31省份GDP增速

具体思路：

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

实例地址：echarts折线图

实例效果：

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

完整代码：