echarts 地图给每个区域设置定位点图标及散点

首先：echarts地图要先准备好，地图的json数据。.

实现的效果图：

代码：

import Util from "@/util/echarts/common"; // 引入echarts公共的类\
import yangZhou from "../yangZhouMapdata.json"; // 扬州地图数据export default class Bar extends Util {constructor(el, option) {super(el, option); // 继承父类，echarts公共类的值this.init(); // 初始化}init() {setTimeout(() => {this.myChart = this.$e.init(this.$el);this.setCharts();this.$e.registerMap("yangzhou", yangZhou); // 注册扬州数据this.myChart.setOption(this.chartOption, true); // 将配置项加到echarts中window.addEventListener("resize", () => { // 监听屏幕缩放，使echarts同样缩放this.myChart.resize();});}, 1000);}setCharts() { // 配置echarts// 地图上的图标var img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALxSURBVHgB1VVPTxNBFH9vtgURgiiJmMi/HvRgotDoQb1Y4hUQTDwLnwD5BNJPIF69iGcTA2jixUTUi0abxXgyMe7S9lA0hlKlgNud8c3arbvtzvaPJoZfMtmdee/9fvNm3r4FOOjAMOOUoffYjM8wZFdoOkpjuGwyaaxz4CuPB88vtSQwldHnhIAFeu2BcJgklFQJBQpMpvU7ZLgFTUAALK4OxufrCrRC7sHSymB81rvAvJMJQ5/5C3KJmYmNlC++koG8UKGBDn8uslXk0YbYciyel5NKBjZpNEBulkcYnMpzJxUBpsHNkKBl2lWczjcmh9yhXFM5I2DCfY941kdV5EQ67VuIxU16TF9L68/pmagRQByB6gxAUe+023lQ7VRtGw4SyAc45su7DQTZ1lVxNQJCiBX4RyCuFzUCjONSgG/PuKEnQIGpzFtpqzlahqJSAL4vmS7NgNpSNWUFuXVdIVd/N6asNHfirSJ5aUkKul8VMCyJJtKppGb/XJMLttaWoN5zO4Ccjgce+DirHRRZNAqZ7Zi3MFi1BznMQotAatvVVRfcrjdSi4hsDpqD7+xdsCBPxtkC1O85XsgGNxbIFbQoK6aZo0IBSdUHyVRBFLAmA6EOqGruLg/FF1V2FhZMgQsQ0jUJJuPOfxtaEpAoH5UZRF4uyXxovMow/m71cFts6Jj1QxyJaOIMt8U96sNOW6CjszCi3SiV+Keohtua2Pn2cODybkMC09k3vQDR05Rcr7DFWcHgJDkdBTkEXqVDR8r7Gc236GveQoYfSdDQGG5zDsaj/pGsUuA3efsl+U6XRzUtLlZt5zgK0SUAP3uXOeIrDcAh3uvofPm091TBtfnuIJ3TyIBFhwvBoLb4mv5OmxUHAV985DSnDD645DK2q/jV8u8pANez7/sF2AOcs27GIFoW7PT6UIY7zu45WIzxQimi5b73ncusIZbqCnghLzt6oq9j38Looe52p/vuFfZL7VFhWbnN3ScXJovwP/ELdRUYJKitueUAAAAASUVORK5CYII=";var mydata = [   // 总数];var RTM_ARR = [ // 对应区域的圆点的数量{name: "宝应县", locs: [{name: "", value: [119.354952, 33.247371]},{name: "", value: [119.319891, 33.230946]}]},{name: "高邮市", locs: [{name: "", value: [119.499821, 32.788484]},{name: "", value: [119.511176, 32.779256]}]},{name: "江都区", locs: [{name: "", value: [119.576383, 32.440478]},{name: "", value: [119.573257, 32.464578]}]},{name: "市区", locs: [{name: "", value: [119.418183, 32.42738]},{name: "", value: [119.358967, 32.397142]}]},{name: "仪征市", locs: [{name: "", value: [119.249536, 32.26075]},{name: "", value: [119.1541, 32.320819]}]}];var icon = [ // 给每个区域设置的值，目的是给每个名字 前面添加图标{name: "宝应县",value:[119.336984, 33.2194]},{name: "高邮市",  value:[119.413202, 32.848564]},{name: "江都区",value:[119.593481, 32.546564]},{name: "市区", value:[119.350777, 32.443899]},{name: "仪征市",value:[119.1, 32.416333]}];function getsimboldata(mapName, XXX_ARR) {//console.log(mapName);let NullArr = [];for (const arr of XXX_ARR) {NullArr = NullArr.concat(arr.locs);}console.log(NullArr);return NullArr;}this.chartOption = {// backgroundColor: "rgba(0, 27, 36, 0.3)",tooltip: {show: false,trigger: "item",alwaysShowContent: false,backgroundColor: "#0C121C",borderColor: "rgba(0, 0, 0, 0.16);",hideDelay: 100,triggerOn: "mousemove",enterable: true,textStyle: {color: "#DADADA",fontSize: "12",width: 20,height: 30,overflow: "break",},showDelay: 100,formatter: function (params) {if (typeof params.value[2] === "undefined") {return params.name + " : " + params.value.toFixed(1);} else if (params.value[2] === 0) {return params.name;} else {return params.name + " : " + params.value[2].toFixed(1);}},},geo: {zoom: 1.2, //当前视角的缩放比例map: "yangzhou",label: {// 通常状态下的样式normal: {show: true,textStyle: {color: "#fff",fontSize:"14",},},// 鼠标放上去的样式emphasis: {textStyle: {color: "#fff",},},},// 地图区域的样式设置itemStyle: {normal: {borderColor: "#4FE2CF",borderWidth: 0.5,areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "rgba(147, 235, 248, 0)", // 0% 处的颜色},{offset: 0.9,color: "rgba(147, 235, 248, .2)", // 100% 处的颜色},],globalCoord: false, // 缺省为 false},shadowColor: "rgba(128, 217, 248, 1)",shadowOffsetX: -6,shadowOffsetY: 2,shadowBlur: 8,},// 鼠标放上去高亮的样式emphasis: {areaColor: "#389BB7",borderWidth: 1,},},},series: [{type: "map",map: "yangzhou",// left: 'center',// top: 'middle',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: "#3B5077",},emphasis: {areaColor: "#2B91B7",},},animation: false,data: mydata,},{name: "RTM",type: "scatter",coordinateSystem: "geo",data: getsimboldata("yangzhou", RTM_ARR), // 地图的数据点symbolSize: function () {return 3;},label: { // 圆点的标签normal: {show: false,formatter: function (params) {return params.name;},position: "right",color: "#69A4D9",fontSize: "1",},emphasis: {show: false,},},itemStyle: { // 地图上的数据的normal: {color: "#4FE2CF",borderWidth: 2,borderColor: "#4FE2CF",},},},// 用于地图中给每个名字设置前面的图标{type: "scatter",coordinateSystem: "geo",data: icon,symbol: img,symbolSize:[16, 20],symbolKeepAspect:"true"// itemStyle: {//     normal: {//         color: "#4bbbb2",//         borderColor: "#b4dccd",//         width:12,//         height:16//     }// }},]};}
}

echarts 地图给每个区域设置定位点图标及散点相关推荐

Echarts地图绘制自定义区域 - geojson.io使用方法
Echarts地图绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区.需手动绘制. STEP1:获取市区json ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
关于echarts地图坐标自定义区域说明
一.通过其他平台提供的Geojson,对echarts引入配置推荐: 1. 地址 2.TangSY 地址地址2 二.提供的Geojson与实际可能会有误差,比如区域重新划分等,这就需要对Geojs ...
Tableau实战系列浏览 Tableau 环境（八） -tableau文件类型、语言和区域设置以及图标
前言以下是我为大家准备的几个精品专栏,喜欢的小伙伴可自行订阅,你的支持就是我不断更新的动力哟! MATLAB-30天带你从入门到精通 MATLAB深入理解高级教程(附源码) tableau可视化数据 ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
高德地图使用、echarts地图等地图设置
1.高德地图使用前提准备: 1.打开高德地图开方平台,注册账号: https://console.amap.com/dev/key/app 2.创建一个应用,获取key值. 一.引入相关资源 < ...
Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...
echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)
(1)地图:1.下载矢量地图.json文件 2.请求.json文件var map=await axios.get('./static/矢量地图数据/china.json');3.注册地图echarts ...

echarts 地图给每个区域设置定位点图标及散点

echarts 地图给每个区域设置定位点图标及散点相关推荐

最新文章

热门文章

echarts 地图 给每个区域设置定位点图标及散点

echarts 地图 给每个区域设置定位点图标及散点相关推荐

最新文章

热门文章

echarts 地图给每个区域设置定位点图标及散点

echarts 地图给每个区域设置定位点图标及散点相关推荐