1. 配置Json文件
1.1 获得每个省份的json数据
-
打开 阿里云数据可视化平台 主页。
-
在搜索框中输入所需省份。
-
将json文件下载到本地。
1.2 将各省份的json数据进行融合
- 打开 geojson.io 主页
- 点击 open，上传刚刚下载的 json 文件，对多个省份不断上传
- 保存得到的整合省份json文件
2. 地区数据可视化
2.1 布局基本代码
- 打开 Echarts使用手册 拷贝以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
- 将所框部分代码删除
- 引入以下 js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
4. 将代码拷贝到以下图片位置中
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('HK', geoJson);
myChart.setOption(
(option = {
title: {
// 图的名称
text: '',
},
visualMap: {
// 数据的范围
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
// 区域颜色
inRange: {
color: ['#E1F5FE', '#B3E5FC', '#4FC3F7', '#03A9F4', '#0288D1']
}
},
series: [
{
type: 'map',
map: 'HK',
data: [
{
name: '中西区', value: 20057.34},
],
}
]
})
);
});
2.2 修改配置代码
- 修改json路径，改为刚刚整合的地区json文件路径
- 添加数据，并根据数据范围修改visualMap属性中的max与min值
- 添加标题，并修改其位置，修改图例的位置
3. 效果图
