echarts地图下钻效果

先看效果图，第二张是因为数据差距过大导致。可调

再看代码

import * as echarts from 'echarts';
import mapJson from '../utils/福州市.json';
import mapJson1 from '../utils/三明市.json';
import mapJson2 from '../utils/福建省.json';
let selected='福建省'
export default {init (id, res, city=selected) {// var chartDom = document.getElementById(id);let  myChart = echarts.init(document.getElementById(id)); let f = (id, res, selected) => {var data;var geoJson;if (selected === '三明市') {geoJson = mapJson1;data = [{ name: '梅列区', value: 0 },{ name: '三元区', value: 0 },{ name: '明溪县', value: 0 },{ name: '清流县', value: 0 },{ name: '宁化县', value: 0 },{ name: '大田县', value: 0 },{ name: '尤溪县', value: 0 },{ name: '沙县', value: 0 },{ name: '将乐县', value: 0 },{ name: '泰宁县', value: 0 },{ name: '建宁县', value: 0 },{ name: '永安市', value: 0 }];} else if (selected === '福州市') {geoJson = mapJson;data = [{ name: '鼓楼区', value: 0 },{ name: '台江区', value: 0 },{ name: '仓山区', value: 0 },{ name: '马尾区', value: 0 },{ name: '晋安区', value: 0 },{ name: '长乐区', value: 0 },{ name: '闽侯县', value: 0 },{ name: '连江县', value: 0 },{ name: '罗源县', value: 0 },{ name: '闽清县', value: 0 },{ name: '永泰县', value: 0 },{ name: '平潭县', value: 0 },{ name: '福清市', value: 0 },];} else if (selected === '福建省') {geoJson = mapJson2;data = [{ name: '福州市', value: 1550 },{ name: '三明市', value: 650 },{ name: '莆田市', value: 0 },{ name: '南平市', value: 0 },{ name: '宁德市', value: 0 },{ name: '龙岩市', value: 0 },{ name: '泉州市', value: 0 },{ name: '漳州市', value: 0 },{ name: '厦门市', value: 0 }];}//获取当前显示地图下方地市的坐标点数据； 用于气泡显示var geoCoordMap = {};var mapFeatures = geoJson.features;mapFeatures.forEach(function (v, i) {var name = v.properties.name;geoCoordMap[name] = v.properties.centroid;});//将data数据进入方法，取需要的参数； 用于气泡显示var convertData = function (data) {let val = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];//这个是坐标if (geoCoord) {val.push({name: data[i].name,value:  geoCoord.concat(data[i].value),//value是要显示的数值});}//name和value/cityCode参数根据实际项目中后台返回的参数名走；}return val;};// echarts.dispose(document.getElementById(id)); //先去掉原来的地图// myChart = echarts.init(document.getElementById(id));console.log(res)var option;myChart.showLoading();myChart.hideLoading();echarts.registerMap('SM', geoJson);for (let index = 0; index < res.length; index++) {const element = res[index];data.push({ "name": element.name, "value": element.value });}myChart.setOption(option = {title: {// text: '泊位分布情况',},tooltip: {trigger: 'item',formatter: function(params) {if (typeof (params.value)[2] == "undefined") {if(isNaN(parseInt(params.value))){return params.name + ' : ' + '-';}else {return params.name + ' : ' + params.value;}} else {return params.name + ' : ' + params.value[2];}}},geo: {show: true,map: 'SM',label: {normal: {show: false},emphasis: {show: false,}},// left:'45%', //调整地图初始化位置roam: true,itemStyle: {normal: {areaColor: 'transparent',borderColor: '#3fdaff',borderWidth: 2,shadowColor: 'rgba(63, 218, 255, 0.5)',shadowBlur: 30},emphasis: {areaColor: '#2B91B7',}}},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',},visualMap: {min: 0,max: 100,text: ['拥挤', '空闲'],realtime: true,calculable: false,inRange: {// color: ['#7ea4e0', '#6597e3', '#4a88e7', '#377de9', '#2472e8', '#1267ea']},//图列字体颜色textStyle: {color: '#fff',fontSize:14}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize:10,label: {normal: {formatter: '{b}',position: 'right',show: true,color: '#fff'},emphasis: {show: true}},itemStyle: {normal: {color: '#fff'}}},{type: 'map',map: 'SM',zoom: 12,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#FFFFFF',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: function (val) {// var a = (maxSize4Pin - minSize4Pin) / (max - min);// var b = minSize4Pin - a*min;// b = maxSize4Pin - a*max;// return a*val[2]+b;return val[2]/30},label: {normal: {position: 'top',formatter: function(res){return res.value[2]},show: true,textStyle: {color: '#fff',fontSize: 11,}}},itemStyle: {normal: {color: '#F62157', //标志颜色}},zlevel: 6,data: convertData(data)},  {name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function(a, b) {return b.value - a.value;})),symbolSize: function(val) {return 10;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#F4E925',shadowBlur: 10,shadowColor: '#05C3F9'}},zlevel: 1},]});option && myChart.setOption(option);}//定义福建省的数组// let cities = ['福州市', '三明市', '莆田市', '南平市', '宁德市', '龙岩市', '洛阳市', '泉州市', '漳州市', '厦门市'];let citiesText = ['福州市', '三明市'];// // 定义初始加载的地图区域,福建省地图selected = city;f(id, res, selected)// 判断当前要加载的地图是不是范围内的市let isCity = (name) => {return citiesText.some((city) => {return city === name;})}// 监听地图点击事件myChart.on('click', (ev) => {// 如果点击的是一个市,那就切换到这个市的地图if (isCity(ev.name)) {selected = ev.name;// 从外部加载这个市的地图文件f(id, res, selected)return} else {// 否则切换福建省的地图selected = '福建省';f(id, res, selected)return}})window.addEventListener("resize", function() { //浏览器大小调整echarts随之改变myChart.resize();});}}

echarts地图下钻效果相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...
前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作
效果图如下: 代码如下: <template><div class="about"><div id=" ...

echarts地图下钻效果

echarts地图下钻效果相关推荐

最新文章

热门文章