安装echarts
yarn add echarts
获取省市区数据来源的json文件
datav使用的是高德坐标系,即国测局坐标(GCJ-02)。对于GPS,即WSG84坐标系经纬度需要转GCJ-02坐标才能在地图上正确显示
生成地理坐标系
var uploadedDataURL = "./js/henan.json"; //地区的json
(function(){
$.getJSON(uploadedDataURL,null,function(data){
var myChart = echarts.init(document.getElementById('chart1'), "westeros");
echarts.registerMap('henan', data); //将地区数据注入到地图中
option = {
geo: {
show: true,
map: 'henan',
itemStyle: {
normal: {
// areaColor: '#031525',
// borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series:[
{
type: 'map',
map: 'henan',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
animation: false,
data: [
{name:'武清区',value:39},
]
},
]
}
myChart.setOption(option);
})
})()
多省份的json文件合并
多省份合并json地址:http://geojson.io/#map=5/33.229/108.149
使用方式
1.上传需要合并的地区json文件
2.上传成功后会生成合并好的json数据,将其复制到自己的项目文件中即可