利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果(真实项目中亲测有效~)

前言

在使用echarts进行数据可视化开发的过程中，我们常常会遇到各种问题，比如说：echarts中的map地图相关js，json文件资源缺失，或者说想实现在显示中国地图的map中区域划分到市级级别，地图轮廓最小划分为市级，像这种案例，官方文档上也没有相关配置或API的讲解，只能靠自己摸索了，网上一百度，找了好久，全是无关没用的信息，最终还是得自己来解决；不过还好，最终这些问题经过不懈努力都解决了，后面我也会给出上面所说问题的文件资源及解决方案。(ps: 估计网上你们也找不到一篇和这问题有关的有用的文章，估计这是唯一真正解决目标问题的文章，哈哈哈哈哈~)

正文

先看简单实现的效果图：

实现这种中国地图上市级级别显示效果的关键：

1. json文件的准确导入：china-cities.json文件的导入
核心代码：import chinaCityJson from "@/data/china-cities.json";

ps: (路径写自己导入文件所在项目中的位置即可，此处只是我这边自己的路径，仅供参考。文档上及大多数人都是使用$.get()方法去使用的，其实在vue中直接导入也可以的，但后面要注册，即第二个关键点)

json文件资源下载链接：china-cities.json

2. 地图注册：this.$echarts.registerMap("china", chinaCityJson);

ps:（这里 this.$echarts的使用是因为在main.js中全局已经注册过了 Vue.prototype.$echarts = echarts ，所以可以直接使用，不过看个人情况，也可以组件内部单独导入echarts并使用，如 import echarts from 'echarts' ，echarts.registerMap("china", chinaCityJson)，这种也可以使用）

注意：如果第一点那里使用的不是json文件，而是导入的js文件，则第二点的注册一行代码this.$echarts.registerMap("china", chinaCityJson)也就不需要了。

其他剩下的都和平时正常开发使用echarts差不多一样了，部分重要代码如下所示：

 let options = {title: {},dataset: {source: this.data},tooltip: {textStyle: {fontSize: nowSize(14)},formatter: "{b}"},series: [{type: "map",map: "china",itemStyle: {areaColor: "#3d5372",borderColor: "#6a7a93",borderWidth: 1},emphasis: {label: {show: false},itemStyle: {areaColor: "#3d5372"}}}]};this.$echarts.registerMap("china", chinaCityJson);let dom = this.$echarts.init(this.$refs.dom);dom.setOption(options);

基本上官方文档上配置项手册里都可以找到，具体情况具体看，根据个人情况查看官方文档进行开发使用即可：echarts官方文档配置项手册

其他相关map的js及json文件资源请评论里留言或私信我。

利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果(真实项目中亲测有效~)相关推荐

Java之真实项目中的章节排序实例
开心一笑 [临终要求: 一犯人被执行枪决 ,由于子弹是劣质的,第一枪没放出,接着又放了第二枪-第三枪-这时犯人哭了:大哥你掐死我吧,太他妈吓人了!] 视频教程大家好,我录制的视频<Java之优 ...
从真实项目中抠出来的设计模式——第三篇：责任链模式
一:现实场景有时候在开发的过程中,我们经常会根据某个状态的值,写出很多的ifelse逻辑,比如拿项目里面的案例来说,如果当前发送的是彩信,此种状态需要如何给实体赋值,如果是短信,邮件又是其他方式的赋 ...
从真实项目中抠出来的设计模式——第二篇：过滤器模式
一:实际场景介绍我们在给用户做订单催付通知的时候,会有这样的一种场景,用户在系统后台设置一组可以催付的规则,比如说订单金额大于xx元,非黑名单用户,来自哪个地区,已购买过某个商品,指定某个营销活动 ...
前端人真实项目中遇到的问题总结
// 以下题目有简单也有难的(具体看你怎么定义). // 如果能做到立马想出答案的,则前端算是学的不错的了. // 如果需要百度才能做出来(直接百度答案的,我就只能说你开心就好),那么也说明一般. / ...
mysql选什么隔离级别_互联网项目中mysql应该选什么事务隔离级别
摘要企业千万家,靠谱没几家. 社招选错家,亲人两行泪. 祝大家金三银四跳槽顺利! 引言开始我们的内容,相信大家一定遇到过下面的一个面试场景面试官:"讲讲mysql有几个事务隔离级别?& ...
从真实项目中抠出来的设计模式——第一篇：策略模式
有时候因为种种原因导致我们会写出很多丑陋的代码,比如赶工时,短暂性的偷懒,不会设计模式等等导致代码沉积,一个cs上万行代码这样场景是有发生, 当然这里也包括我...所以时间充裕一点之后就想重构一下,毕 ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
真实项目中 ThreadLocal 的妙用
一.什么是 ThreadLocal ThreadLocal 提供了线程的局部变量,每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作,但不会和其他线程的局部变量冲突,实现了线程间 ...
轨迹系列8——记某真实项目中轨迹展示查询效率优化方案一（初步设计）
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景准确说,该项目的迹展示涉及到两个方面,一个是轨迹查询展 ...

利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果(真实项目中亲测有效~)

前言

正文

实现这种中国地图上市级级别显示效果的关键：

利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果(真实项目中亲测有效~)相关推荐

最新文章

热门文章