ECharts实现省市地图切换

最近写项目用到了ECharts实现省市地图切换，写出来记录一下。

ECharts实现省市地图切换，一般有两种引用形式js文件和json文件。我这里用到的是js文件。js文件资源网上可以搜到。

代码如下：

<!-- 引入地图ECharts图表 start --><!-- 引入河南省地图js文件 --><script src="./js/henan.js"></script><script src="./js/anyang.js"></script><script src="./js/hebi.js"></script><script src="./js/jiaozuo.js"></script><script src="./js/jiyuan.js"></script><script src="./js/kaifeng.js"></script><script src="./js/luohe.js"></script><script src="./js/luoyang.js"></script><script src="./js/nanyang.js"></script><script src="./js/pingdingshan.js"></script><script src="./js/puyang.js"></script><script src="./js/sanmenxia.js"></script><script src="./js/shangqiu.js"></script><script src="./js/xinxiang.js"></script><script src="./js/xinyang.js"></script><script src="./js/xuchang.js"></script><script src="./js/zhengzhou.js"></script><script src="./js/zhoukou.js"></script><script src="./js/zhumadian.js"></script><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var chart = echarts.init(document.getElementById('map'));//定义河南省市的数组let cities = ['anyang', 'hebi', 'jiaozuo', 'jiyuan', 'kaifeng', 'luohe', 'luoyang', 'nanyang', 'pingdingshan', 'puyang', 'sanmenxia', 'shangqiu', 'xinxiang', 'xuchang', 'zhengzhou', 'zhoukou', 'zhumadian'];let citiesText = ['安阳市', '鹤壁市', '焦作市', '济源市', '开封市', '漯河市', '洛阳市', '南阳市', '平顶山市', '濮阳市', '三门峡市', '商丘市', '新乡市', '许昌市', '郑州市', '周口市', '驻马店市'];// 定义初始加载的地图区域,河南省地图let selected = 'henan';// 定义加载地图的方法// 参数为要显示地图区域的名字// 必须要先引入了对应地图的js文件或者json文件,在这一步的时候,echarts会自动将对应的JS文件注入,地图才会显示.let loadMap = (param) => {chart.setOption({series: [{type: 'map',map: param,itemStyle: {normal: {label: {show: true, //默认是否显示省份名称textStyle: {color: '#FFFFFF'// 文字的颜色}},borderWidth: 1,borderColor: '#79C6D9',// 地图背景颜色areaColor: 'transparent'},emphasis: {label: {show: true//选中状态是否显示省份名称},areaColor: '#82ADED'// 选中地图的颜色}},}]})}// 第一次加载地图loadMap(selected);// 判断当前要加载的地图是不是范围内的市let isCity = (name) => {return citiesText.some((city) => {return city === name;})}// 定义方法加载某个市的地图文件let loadScriptMap = (name, callback) => {let pinyinName = cities[citiesText.indexOf(name)];callback(pinyinName);}// 监听地图点击事件chart.on('click', (ev) => {// 如果点击的是一个市,那就切换到这个市的地图if (isCity(ev.name)) {selected = ev.name;// 从外部加载这个市的地图文件loadScriptMap(ev.name, loadMap);} else {// 否则切换河南省的地图selected = 'henan';loadMap(selected);}})</script><!-- 引入地图ECharts图表 end -->

ECharts实现省市地图切换相关推荐

湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
echarts各省市地图实现
echarts各省市地图实现 echarts由于以下原因停止了地图下载服务在这里提供下原来的各省市地图的json,js文件: 各省json及js下载地址下面是具体实现方式(地图配置的代码片段): ...
微信小程序使用Echarts实现省市地图（山东地图demo）
上篇写过在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下. 1.首先还是下载Echarts在git上提供的组件,下载到本地放到 ...
vue中Echarts之省市地图（北京市）展示相关数据
1. 下载ECharts 插件 npm i echarts --save 2. 引入省市地图 import echarts from 'echarts' Vue.prototype.echarts = ...
echarts实现省市地图
使用Echarts实现省市区的地图,今天有时间写个北京地图demo.先看下效果图: 1.首先先引入echarts.min.js文件,然后改造下beijing.json文件,改造后把json改成js文件 ...
ECharts之省市地图
效果图背景图片下载ECharts npm install echarts --save 引入省市地图在 main.js 文件里引入 import Vue from 'vue' impor ...
echarts 全国各省市地图切换展示
效果如上图,开始默认为全国地图,选择省或者市渲染为对应的地图 index.html <script type="text/javascript" src="http ...
echarts从全国地图切换成省级地图地图不居中的问题
我的项目会有全国.省级两种版本.我在写全国地图的时候地图自己居中自适应.可是数据变成省级数据后,就会缩成一坨. 全国地图如下: 切换成省级数据变成如下: 我就很疑惑,我也没有设置地图的位置啥的,应该就 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

ECharts实现省市地图切换

ECharts实现省市地图切换相关推荐

最新文章

热门文章