vue + echarts 实现乡镇地图

vue +echarts 实现乡镇地图

一、导入地图数据（我这里用的是json）

在这里插入代码片
``<template><div class="content"><!-- 地图 --><div id="map" style="width:1000px;height: 700px; position: relative"></div></div>
</template><script>import echarts from "echarts"import tuanfengJson from "./map.json"export default {components:{},data() {return {mapJson: [],collapsable: false,expandAll: true,style: {background: '#fff',color: '#5e6d82',},}},async created() {this.mapJson = await tuanfengJson;this.mapData = tuanfengJson.features.map(item => {return ({name: item.properties.name,value: 1000,})})this.init() //调用下面的 echarts初始化},mounted() {const  data ={town_name:'团风县'}this.getTowninfo(data)},methods: {init() {const  that = this;var myChart = echarts.init(document.getElementById('map'));echarts.registerMap('cityMap', this.mapJson, {}); //加载自定义边界数据地图var option = {dataRange: {show:false,x: 'left',y: 'bottom',splitList: [{start: 1, end: 1, color: '#87cefa'},{start: 2, end: 2, color: '#9dd7cd'},{start: 3, end: 3, color: '#b3e09f'},{start: 4, end: 4, color: '#c8e972'},{start: 5, end: 5, color: '#def244'},{start: 6, end: 6, color: '#f4fb17'},{start: 7, end: 7, color: '#ffee00'},{start: 8, end: 8, color: '#ffcc00'},{start: 9, end: 9, color: '#ffaa00'},{start: 10, end: 10, color: '#ff8900'},{start: 11, end: 11, color: '#2AB8FF'},],},// tooltip: {//   trigger: 'item',//   formatter: p => {//     // console.log(p)//     let val = p.value;//     if (window.isNaN(val)) {//       val = 0;//     }//     let txtCon =//       "<div style='text-align:center'> 地区：" + p.name + '</div>';//     this.show = true//     return txtCon;//   }// },visualMap: {show:false,min: 1,max: 12,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '地图',type: 'map',mapType: 'cityMap',zoom: 1.2,aspectScale: 1, //地图长度比data: [{name: '团风镇',value: 1},{name: '淋山河镇',value: 2},{name: '方高坪镇',value: 3},{name: '回龙山镇',value: 4},{name: '马曹庙镇',value: 5},{name: '上巴河镇',value: 6},{name: '总路咀镇',value:7},{name: '但店镇',value: 8},{name: '贾庙乡',value: 9},{name: '杜皮乡',value: 10},],nameMap: {'团风镇': '团风镇','淋山河镇': '淋山河镇','方高坪镇': '方高坪镇','回龙山镇': '回龙山镇','马曹庙镇': '马曹庙镇','上巴河镇': '上巴河镇','总路咀镇': '总路咀镇','但店镇': '但店镇','贾庙乡': '贾庙乡','杜皮乡': '杜皮乡',},itemStyle: {normal: {show: true,areaColor: '#031525', //地图区域的颜色 也可以颜色渐变如下的 areaColorborderColor: '#0CD5DD', //边界线颜色borderWidth: '1', //边界线的宽度},emphasis: { // 鼠标移入时区域的样式show:false,areaColor: '#2AB8FF',borderWidth: 0,color: 'green'}},label: {show: true,normal: {show: true,textStyle: {color: '#333', //省市区字体颜色fontSize:22}},emphasis: { //对应的鼠标悬浮效果show: true,textStyle: {color: '#333' //鼠标移入对应的省市区字体颜色}}},markPoint: {symbol: 'image://' + require('../../assets/five-pointed-star.png'), // 自定义图片路径symbolSize: [38, 38], // 图片大小label: {position: 'top',color:'#fff'},data: [{name: '团风镇',coord: [114.873448, 30.633345],value: ''}]},}]}myChart.setOption(option);myChart.on("mouseover", function (params){if(params.data.value != undefined){myChart.dispatchAction({type: 'downplay'});}});//点击地图上区域请求（各地区信息）myChart.on('click', function (params) {console.log(params)var ini_len=option.series[0].data.length;option.series[0].data[0].value=1;option.series[0].data[1].value=2;option.series[0].data[2].value=3;option.series[0].data[3].value=4;option.series[0].data[4].value=5;option.series[0].data[5].value=6;option.series[0].data[6].value=7;option.series[0].data[7].value=8;option.series[0].data[8].value=9;option.series[0].data[9].value=10;myChart.setOption(option);for(var i=0;i<ini_len;i++){if(option.series[0].data[i].name==params.name){//如果匹配正确//改变颜色option.series[0].data[i].value=11;myChart.setOption(option);}}})},}}
</script><style lang="scss" scoped>
</style>

vue + echarts 实现乡镇地图相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
vue+echarts+json绘制地图“绝对干货”
vue+echarts+json绘制地图"绝对干货" 不多说,直接干该样式实现及其简单跟着我做就好了 vue没安装的回去看基础吧 echarts没安装的 npm instal ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
vue+echarts GL3d中国地图
相关实例 made a pie 添加链接描述 2.添加链接描述 3.添加链接描述一.下载安装所需包 npm install echarts@4.9.0 --save //之所以下载4点几版本是因为5 ...
Echarts绘制乡镇地图方法心得
在上一篇使用Echarts在前端页面绘制地图中简单介绍了使用Echarts在绘制地图的基本流程方法,但在项目上,客户要求使用乡镇区域数据,阿里云提供的地图数据是没有乡镇区域地图数据的,两个神器,玩美解 ...
vue+Echarts+element-ui+百度地图实现地图可视化
1.安装Echarts npm i echarts -S ||npm install echarts --save 官网教程: https://www.echartsjs.com/zh/tutoria ...
vue+echarts实现省份地图展示
一.效果下面以四川省地图为例,展示效果如下: 二.echarts的安装这里我是使用npm进行安装的,命令如下: npm install echarts 三.echarts各省份地图js导入以下是 ...

vue + echarts 实现乡镇地图

vue + echarts 实现乡镇地图相关推荐

最新文章

热门文章