vue+echarts地图 + 杭州市 + 点击穿透下面的区和县

                    vue+echarts地图 + 杭州市 + 点击穿透下面的区和县

根据echarts Api 安装教程进行安装
npm install echarts --save
有需要的可以安装固定版本 npm install echarts@4.80 --save
引入（我这里是全局引入）
在入口文件main.js里引入
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
引入需要的所对应的城市json文件（杭州市为例）

4.定义函数初始化echarts

mineMap() {var self = this;var mapChart = this.$echarts.init(document.getElementById("myEcharts"));let dataDi = [{ code: "330111", name: "富阳区", value: 15 },{ code: "330105", name: "拱墅区", value: 1000 },{ code: "330108", name: "滨江区", value: 20000 },{ code: "330127", name: "淳安县", value: 43562 },{ code: "330182", name: "建德市", value: 15896 },{ code: "330104", name: "江干区", value: 8653 },{ code: "330112", name: "临安区", value: 9756 },{ code: "330102", name: "上城区", value: 1356 },{ code: "330122", name: "桐庐县", value: 25863 },{ code: "330106", name: "西湖区", value: 1235 },{ code: "330103", name: "下城区", value: 5643 },{ code: "330109", name: "萧山区", value: 25863 },{ code: "330110", name: "余杭区", value: 1235 },];let mapName = this.jxmap[this.cityName] + "";this.$echarts.registerMap(mapName, this.jxmap[this.cityName]);var mapOption = {tooltip: {trigger: "item",backgroundColor: "#fff",borderWidth: 1,borderColor: "#CCE5FF",formatter: (params) => {return `<section style='width:100px;height:45px;color:#333333'><div style='color:#333333;font-size: 14px;'>${params.name}</div><div><span style="font-size: 12px;color:#808080">${params.seriesName}:</span><span style="font-size: 16px;color: #4298F3;">${params.value}</span></div></section>`;},},series: [{name: "台区数量",type: "map",// map: this.mapData1,map: mapName,roam: false,layoutSize: "100%", //大小zoom: 1.2,itemStyle: {normal: {label: {show: true,color: "#fff",formatter: function (data) {var a = data.name;var b = data.value;return a + "\n" + b;},},areaColor: "#ADD1FF",borderColor: "#fff",},emphasis: {borderWidth: 2,borderColor: "#FFE04D",areaColor: "#ADD1FF",label: {show: true,},},},data: dataDi,},],};mapChart.setOption(mapOption);window.addEventListener("resize", function () {mapChart.resize();});mapChart.on("click", function (params) {let name = params.name;self.handlerChange(name);});},

5 .在data里定义对象点击不同区域的所对应的json

data() {return {cityName: "杭州市",jxmap: {//以后可能会返回每个城市所对应的城市代码 现在用城市名代替// 330100: hangzhou,// 330111: fuyang,// 330105: gongshu,// 330108: binjiang,// 330127: chunan,// 330182: jiande,// 330104: jianggan,// 330112: linan,// 330102: shangcheng,// 330122: tonglu,// 330106: xihu,// 330103: xiacheng,// 330109: xiaoshan,// 330110: yuhang,杭州市: hangzhou,富阳区: fuyang,拱墅区: gongshu,滨江区: binjiang,淳安县: chunan,建德市: jiande,江干区: jianggan,临安区: linan,上城区: shangcheng,桐庐县: tonglu,西湖区: xihu,下城区: xiacheng,萧山区: xiaoshan,余杭区: yuhang,},};},

6.获取点击不同区域的所对应的name（echarts的点击事件参数params中）
7.定义名字改变时对应json改变的函数

 handlerChange(name) {this.cityName = namethis.mineMap()},

并在echarts的点击事件中调用其函数

 mapChart.on("click", function (params) {let name = params.name;self.handlerChange(name);});},

8.所对应的效果图：

vue+echarts地图 + 杭州市 + 点击穿透下面的区和县相关推荐

Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
vue echarts 地图
本文以echarts官方文档的例子来介绍vue中使用echarts地图 echarts官方文档 https://www.echartsjs.com/zh/index.html 1.安装echarts插 ...
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
echart在开发地图时,会遇到下钻显示子区域地图数据.比如四川省,下钻到市级成都市,再下钻到区级.下载地址:DataV.GeoAtlas地理小工具系列 1.首先需要下载对应的地图,如果是联网的可以直 ...
vue echarts地图省市区下钻详解
哈喽你们好!我是小邱,应该会有很多朋友和我都是全栈,我希望今天发表的文章对大家能够有所帮助. 今天我又要说下我不太熟练地vue技术了虽然不熟练啊但是思路清晰哈哈上码如果你觉得我文章还不错就点个关注 ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
vue echarts 地图立体并设置tooltip属性背景图片
这是做完的样子 1.地图立体的代码,map应与series中的一致 //地图立体的代码,map应与series中的一致 geo: {map: '34',aspectScale: 1, //长宽比zoo ...
vue+echarts 地图携带参数下钻【demo二】
相关必要文件已上传个人GIT代码库,自行下载 https://gitee.com/lemon-design/EchartsMapDeepDown.git 下钻数据为假数据中国–>辽宁–> ...
vue+echarts 地图携带参数下钻【demo一】
相关必要文件已上传个人GIT代码库,自行下载 https://gitee.com/lemon-design/EchartsMap.git 个人鼓捣了快一周了本文地图下钻部分通过watch监控返回数据 ...
vue echarts 地图外边框阴影
这里部分写的假数据,根据需求修改 data() {return {myEcharts: null,scatterData: [{name: '广州市',value: [113.280637,23.12 ...

vue+echarts地图 + 杭州市 + 点击穿透下面的区和县

vue+echarts地图 + 杭州市 + 点击穿透下面的区和县相关推荐

最新文章

热门文章