先看下效果图
1、如何获取地图数据
前往阿里云的地图数据获取需要的地图json
打开的页面是这样子的,下载数据,一定要选框出的部分下载。否则可能会出现奇怪的bug
2、在html中,引入echarts.js ,关于echarts的资料如下
echarts 官方文档
https://echarts.apache.org/zh/option.html#title
echarts 的js文件获取地址
https://echarts.apache.org/zh/builder.html
引入jquery 和 echars.js
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
3、读取吉林省份地图json的数据,并加载到echarts
function getArea () {
const myChart = echarts.init(document.getElementById('main'))
var url = "js/jilin.json";
$.get(url, null, function (ret) {
let geoJson = ret;
echarts.registerMap('jilin', ret)
// 注册矢量地图数据
var option = {
visualMap: { // 视觉映射组件
// type: 'continuous', 如果需要渐变色,设置type为连续
show: true,
// inverse: true, // 反转
top: '70%',
bottom: '0%',
left: '2%',
textStyle: {
fontsize: 12
},
splitList: [ // 自定义范围
{ start: 0, end: 100 },
{ start: 100, end: 300 },
{ start: 300, end: 500 },
{ start: 500, end: 1000 },
{ start: 1000 }
],
color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色
},
tooltip: { // 悬浮框
trigger: 'item', // 触发条件
backgroundColor: 'RGBA(136, 123, 135, 0.8)',
formatter: '{b}<br/>占用数{c}', // 自定义显示数据
textStyle: {
color: '#ffffff'
}
},
series: [
{
type: 'map',
map: 'jilin',
zoom: 1.2,
top: '10%',
x: 'center',
label: {
show: true // 显示
},
itemStyle: {
normal: { // 静态的时候显示的默认样式
areaColor: '#F3D7D9', // 地图颜色
borderColor: '#886364' // 边框颜色
},
emphasis: { // 鼠标移入动态的时候显示的默认样式
borderWidth: 2, // 边框宽度
areaColor: '#ffffff' // 地图颜色
}
},
// 数据
data: [
{
name: '长春市',
value: '1202'
},
{
name: '吉林市',
value: '396'
},
{
name: '通化市',
value: '1125'
},
{
name: '四平市',
value: '635'
},
{
name: '白山市',
value: '586'
},
{
name: '辽源市',
value: '360'
},
{
name: '白城市',
value: '231'
},
{
name: '延边朝鲜族自治州',
value: '196'
},
{
name: '松原市',
value: '80'
}
]
}
]
}
myChart.setOption(option)
})
}