1.引入插件

<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/echarts.js"></script>

2.地图json数据选择

由于每个地区的json数据不一样所以先找到自己需要的对应数据

点击这里获取想要的地图数据

步骤如下：

下载完之后直接放入js文件就行啦！

3.创建一个容器

提示：

容器必须要有指定的宽高哦，大小由个人爱好决定

<div id="main" style="width: 900px;height: 700px;"></div>

4.读取json的数据，并加载到echarts

js/jilin.json就是您选择的地图所对应的数据名称

$.getJSON("./js/jilin.json", "", function(ret) {getArea(ret);
})
//吉林省分地图
function getArea(ret) {const myChart = echarts.init(document.getElementById('main'))let geoJson = ret;echarts.registerMap('jilin', ret)// 注册矢量地图数据var option = {visualMap: { // 视觉映射组件color: ['#040756', '#040756', '#040756', '#040756', '#040756'] //自定义范围的颜色},tooltip: { // 悬浮框trigger: 'item', // 触发条件backgroundColor: 'rgba(255, 170, 255, 0.8)',formatter: '{b}<br/>占用数{c}', // 自定义显示数据textStyle: {fontsize: 102,color: '#027FC5'}},series: [{type: 'map',map: 'jilin',zoom: 1.2,top: '10%',x: 'center',label: {show: true, // 显示    normal: {show: true,textStyle: {fontSize: 16, //字体大小fontWeight: 'bold',color: '#02CCFF' //字体颜色}},},itemStyle: {normal: { // 静态的时候显示的默认样式areaColor: '#F3D7D9', // 地图颜色borderColor: '#55ffff' // 边框颜色},emphasis: { // 鼠标移入动态的时候显示的默认样式borderWidth: 2, // 边框宽度areaColor: '#027FC5', // 地图颜色label: {show: true,textStyle: {color: '#fff' //鼠标经过字体颜色}}}},// 数据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)
}

5.最终效果图

6.特殊效果

还有更多效果可修改比如：

1.地图颜色

visualMap: { // 视觉映射组件color: ['#040756', '#040756', '#040756', '#040756', '#040756'] //自定义范围的颜色},

2.地图边框默认颜色、鼠标移动地图上的效果

itemStyle: {normal: { // 静态的时候显示的默认样式areaColor: '#F3D7D9', // 地图颜色borderColor: '#55ffff' // 边框颜色},emphasis: { // 鼠标移入动态的时候显示的默认样式borderWidth: 2, // 边框宽度areaColor: '#027FC5', // 地图颜色label: {show: true,textStyle: {color: '#fff' //鼠标经过字体颜色}}}},

3.悬浮窗

tooltip: { // 悬浮框trigger: 'item', // 触发条件backgroundColor: 'rgba(255, 170, 255, 0.8)',formatter: '{b}<br/>占用数{c}', // 自定义显示数据textStyle: {fontsize: 102,color: '#027FC5'}},

echarts省份地图制作相关推荐

eCharts省份地图配置及方法
eCharts省份地图配置及方法文章目录: 广东地图使用方法广东地图使用方法 var geoCoordMap = { "广州":[113.30,23.20] }; var co ...
echarts省份地图
html <div id="mainMap" style="width: 600px;height:400px;margin: 200px auto;"& ...
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...
关于echarts省份地图不显示
1.一开始做测试,现在Note-pad++编辑,发现world.js 和china.js都能用,但是zhejiang.js等其他省份的js不能用 2.于是我把这些代码放到自己的项目中编辑,用的ecli ...
Echarts省份地图展示
效果图: 文件中引入的咸阳json数据如下: xianyang.json /* * Licensed to the Apache Software Foundation (ASF) under one ...
html 网页地图集制作ECHARTS,在页面使用echarts的地图（解决地图不完整）
测试环境:IDEA+Tomcat7 谷歌浏览器创建好web工程,编写jsp页面,在自己编写的JSP页面上导包现在echarts停止了在其网站上下载地图脚本,直接通过src引用网站上的china.j ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...

echarts省份地图制作

1.引入插件

2.地图json数据选择

3.创建一个容器

4.读取json的数据，并加载到echarts

5.最终效果图

6.特殊效果

echarts省份地图制作相关推荐

最新文章

热门文章