Echarts绘制地图带标记tooltip

全国各地区JSON文件网址

.agency_information {width: 250px;padding: 5px 0;background: transparent;border-radius: 5px;
}
.agency_title {min-width: 150px;height: auto;margin-bottom: 6px;font-size: 14px;color: #ffffff;font-weight: normal;text-align: center;
}
.agency_type {color: #fe0101;
}
.agency_info_row {box-sizing: border-box;display: flex;justify-content: flex-start;align-items: center;width: 100%;height: auto;padding-left: 10px;background: #ffffff33;margin-bottom: 4px;font-size: 12px;color: #ffffff;font-weight: normal;
}
.agency_info_row > label:first-child {width: 60px;height: auto;margin-right: 20px;text-align: left;
}<div class="map" id="map" style="width:900px;height:900px;"></div>function ecMapServicer(name) {var uploadedDataURL = "json/wuhan.json";// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById(name));/*  {name:'武汉', geoCoord:[114.31, 30.52]}, x-y坐标轴起点[113.45, 29.95] */var data_type_1 = [{type: "一类",name: "五零四文化广场",value: [114.31, 30.1222, 120]},{type: "一类",name: "五零四文化广场",value: [114.41, 30.32, 120]},{type: "一类",name: "五零四文化广场",value: [114.39, 30.52, 120]},{type: "一类",name: "五零四文化广场",value: [114.73, 30.72, 120]}];var data_type_2 = [{type: "二类",name: "五零四文化广场",value: [114.2133, 30.1222, 120]},{type: "二类",name: "五零四文化广场",value: [114.01, 30.3222, 120]},{type: "二类",name: "五零四文化广场",value: [114.59, 30.82, 120]},{type: "二类",name: "五零四文化广场",value: [114.73, 30.72, 120]}];var data_type_3 = [{type: "三类",name: "五零四文化广场",value: [114.27, 31.292, 120]},{type: "三类",name: "五零四文化广场",value: [114.21, 30.72, 120]},{type: "三类",name: "五零四文化广场",value: [114.429, 30.12, 120]},{type: "三类",name: "五零四文化广场",value: [114.73, 30.62, 120]}];// 显示加载动画myChart.showLoading();$.getJSON(uploadedDataURL, null, function (data) {echarts.registerMap("mapData", data);myChart.hideLoading();option = {color: ["#91c7ae", "#749f83", "#ca8622"], //颜色组tooltip: {trigger: "item",show: true,padding: 0,backgroundColor: "#ffffff33",formatter: function (params) {var str = `<div class="agency_information"><div class="agency_title">${params.name}<label class="agency_type">（${params.data.type}）</label></div><div class="agency_info_row"><label>建立时间：</label><label> 2007（使用）</label></div><div class="agency_info_row"><label>负责人：</label><label> 张建华 </label></div><div class="agency_info_row"><label>床位数： </label><label> 200 </label></div><div class="agency_info_row"><label>联系方式：</label><label> 125697415266</label></div><div class="agency_info_row"><label>地址：</label><label> 武汉市xxxxxxxx</label></div></div>`;return str;/* if (typeof params.value[2] == "undefined") {return params.name + " : " + params.value;} else {return params.name + " : " + params.value[2];} */}},grid: {top: 100},legend: {orient: "vertical",icon: "pain",right: '10%',bottom: '10%',itemWidth: 20,itemHeight: 12,align: "left",textStyle: {color: "#fff",fontSize: 12},data: ["一类", "二类", "三类"]},xAxis: {show: false},yAxis: {show: false},geo: {show: true,map: "mapData",label: {normal: {show: false},emphasis: {show: false}},zoom: 1.2,roam: true,itemStyle: {areaColor: "#1A2B75",borderColor: "#3fdaff",borderWidth: 1},emphasis: {itemStyle: {areaColor: "#2B91B7"}}},series: [// 一类{name: "一类",type: "scatter",coordinateSystem: "geo",symbol: "image://img/icon_location_1.png",//自行找图标symbolSize: [14, 16],label: {normal: {show: false,backgroundColor: "#0D1151",position: "right",color: "#ffffff",fontSize: "14",padding: 20},emphasis: {show: false}},itemStyle: {normal: {color: "#00A0E9", //控制图例和地图标记点的颜色borderWidth: 2}},data: data_type_1},// 二类{name: "二类",type: "scatter",coordinateSystem: "geo",symbol: "image://img/icon_location_2.png",symbolSize: [14, 16],label: {normal: {show: false,backgroundColor: "#2B91B7",position: "right",color: "#ffffff",fontSize: "14",padding: 20},emphasis: {show: false}},itemStyle: {normal: {color: "#11D53F", //控制图例和地图标记点的颜色borderWidth: 2}},data: data_type_2},// 三类{name: "三类",type: "scatter",coordinateSystem: "geo",symbol: "image://img/icon_location_3.png",symbolSize: [14, 16],label: {normal: {show: false,backgroundColor: "#2B91B7",position: "right",color: "#ffffff",fontSize: "14",padding: 20},emphasis: {show: false}},itemStyle: {normal: {color: "#E39F28",borderWidth: 2}},data: data_type_3}]};myChart.setOption(option);});myChart.setOption(option);
}

Echarts绘制地图带标记tooltip相关推荐

Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
echarts 绘制地图设置其中某些板块高亮（颜色）
问题描述:当我们用echarts绘制了一个地图,可能需要某个位置高亮. 如下图: 其实有个属性,当我们传入的data数据里面加一行就可以改变它是否选中了.具体代码如下. 当selected:true ...
ECharts 绘制地图飞线
以官方示例为起点进行修改: https://www.echartsjs.com/gallery/editor.html?c=scatter-map 若自行绘制html进行尝试,请记得引入中国地图或者世 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
Echarts绘制地图，且可以下钻到省区
点击前点击后(山东省为例) 1. 安装echarts,echarts按需引入 npm install echarts --save //引入 echarts 核心模块,核心模块提供了 ...
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧.直接贴代码 <template><div class="& ...
echarts 绘制地图柱状图
现在的地图代码是用的江苏省的json,如果需要绘制别的地区,或者中国地图需要下载指定的json进行替换,如果你找不到json下载,可以私信我. 成果图代码下面的代码中有详情的每个参数的注释,文章中 ...
Echarts绘制地图柱状图
场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景:目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要 ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...

Echarts绘制地图带标记tooltip

Echarts绘制地图带标记tooltip相关推荐

最新文章

热门文章