近日，中国新闻网发布新闻：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>
效果图：
写在最后：
创作不易，觉得对你有帮助的可以一键三连哦。
转载请注明出处。