ECharts 绘制吉林省地图，并根据数值设置市区颜色（demo）

吉林省地图，并根据数值设置市区颜色（demo）"/>

ECharts 绘制吉林省地图，并根据数值设置市区颜色（demo）

先看下效果图

1、如何获取地图数据

前往阿里云的地图数据获取需要的地图json

;lat=31.87755764334002&lng=104.150390625&zoom=3

打开的页面是这样子的，下载数据，一定要选框出的部分下载。否则可能会出现奇怪的bug 

2、在html中，引入echarts.js ，关于echarts的资料如下

echarts 官方文档 

.html#title

echarts 的js文件获取地址

.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)})}

4、完整demo下载