300字范文 > echarts 自作地图上高亮显示散点图 tooltips自定义内容 tooltips固定位置

echarts 自作地图上高亮显示散点图 tooltips自定义内容 tooltips固定位置

时间：2020-07-27 19:47:31

最近公司在用echarts弄地图，就自己尝试着研究了一下，研究不深，但也有些了解，

首先是自己做一份地图，然后在地图上显示一些正在移动的点，鼠标放到这些点上，就显示这些点的基本信息，就如这样的图：

其实这张图上的视觉引导线还没有完成，也不知道如何完成，，

第一步，新建一个文件夹，然后目录结构如下：

html文件中的代码如下（不主讲）：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

css中的代码如下（不主讲）：

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

#zhfaEye {

;

height: 650px;

background: url(../images/bgpic.png) no-repeat;

background-size: 100% 100%;

overflow: hidden;

}

.info {

width: 250px;

height: 150px;

background-color: rgba(233, 231, 231, 0.1);

float: right;

position: absolute;

color: #00f4fc;

font-size: 12px;

padding-left: 25px;

text-align: left;

line-height: 25px;

}

.info img {

margin: 20px 20px 0 0;

float: right;

}

.info p:nth-child(2) {

margin-top:40px;

}

.info span {

color: #f1f1f1;

}

js中的代码如下：

//地图中的相关信息

var jiangsuJson = {"type":"FeatureCollection","features":[

]}；

//初始化地图

initjiangsuMap();

function initjiangsuMap(){

//初始化函数，获取jion中的数据，作为散点图中的数据，模拟数据，

var convertdata=function (data){

var res=[];

for(var i=0;i<data.features.length;i++){

var name=data.features[i].properties.name;

var address=data.features[i].properties.cp;

if(name){

res.push({

name:name,

value:address.concat(name)

})

}

return res;

}

var dom=document.getElementById("jiangsuMap");

var myChart=echarts.init(dom);

myChart.showLoading();

myChart.hideLoading();

//注册地图

echarts.registerMap('JS',jiangsuJson);

var option={

//自定义提示框的内容，固定位置，

tooltip:{

position:['800','0'],

formatter:'<div class="info"><img src="../images/tx_ico.png" alt=""><p>5月12日 8:20</p><p><span>执法人员</span>：刘艳</p><p><span>执法类型</span>：随机执法</p><p><span>执法企业</span>：苏州市华润股份有限公司</p></div>'

//初始化散点图的坐标系，就是底图

geo:{

name:'江苏省',

type:'map',

zoom:1.1,

roam:false,

//地图名称

map:'JS',

//如果将此处的label注释掉，地图中将不会显示市级名称

label:{

show:true

itemStyle:{

normal:{

//初始化地图背景颜色

areaColor:'#089AF4'

emphasis:{

//当鼠标移动此处时的地图背景颜色

areaColor:'#6CC7FF'

}

series:[{

name:'city',

type:'effectScatter',

//地图坐标系，

coordinateSystem:'geo',

rippleEffect:{

brushType:'stroke'

//不显示当前的散点图的信息，用label中的formatter不可识别html标签，tooltip可识别

label:{

normal:{

show:false

}

itemStyle:{

normal:{

color:'#ffff00'

emphasis:{

label:{

show:false

}

//获取数据

data:convertdata(jiangsuJson)

}]

}

myChart.setOption(option);

}

最终效果图,鼠标移至黄点上，显示基本信息

注意点：

原本准备用markpoint来标志点，才发现不仅要自己设置点的样式，连点击点显示的tooltip信息都可在点击底图时显示，不符合设计理念（应该可以修改，但我没有尝试），而且标识线也不知道如何弄，，附上代码

// function initjiangsuMap() {

// var dom = document.getElementById("jiangsuMap");

// var myChart = echarts.init(dom);

// myChart.showLoading();

// myChart.hideLoading();

// echarts.registerMap('JS', jiangsuJson);

// var option = {

// itemStyle: {

//label : {

//}

// },

// tooltip:{

//triggerOn:'click',

//position:['900','50'],

//formatter:'<div class="info"><img src="../images/tx_ico.png" alt=""><p>5月12日 8:20</p><p><span>执法人员</span>：刘艳</p><p><span>执法类型</span>：随机执法</p><p><span>执法企业</span>：苏州市华润股份有限公司</p></div>'

// },

// series: [

//{

// name: '江苏省',

// type: 'map',

// zoom:1.1,

// roam: false,

// map: 'JS',

// itemStyle:{

//normal: {

// label:{

// show:true

// },

// areaColor: '#089AF4'

//},

//emphasis:{

// label:{

// show:true

//},

// areaColor: '#6CC7FF'

//}

// },

// markPoint: {

//symbol:'circle',

//symbolSize:'10',

//symbolOffset:['0','100%'],

//itemStyle:{

// normal:{

// color:'#ffd700',

// borderColor:'#ffff00',

// borderWidth:5,

// }

//},

//data: [

// {name:"常州","coord":[119.9688, 31.827665]},

// {name:"连云港","coord":[119.225231, 34.60475]},

// {name:"宿迁","coord":[118.275938, 33.969105]},

// {name:"盐城","coord":[120.162972,33.359868]},

// {name:"淮安","coord":[119.018313, 33.622371]},

// {name:"扬州","coord":[119.423359, 32.406431]},

// {name:"泰州","coord":[119.924813, 32.462395]},

// {name:"南京","coord":[118.793379, 32.063764]},

// {name:"镇江","coord":[119.425641, 32.196676]},

// {name:"徐州","coord":[117.291018, 34.217305]},

// {name:"无锡","coord":[120.320822, 31.506802]},

// {name:"苏州","coord":[120.603357, 31.316829]},

// {name:"南通","coord":[120.908075, 31.987285]}

//]

// }

//}

// ]

// };;

// if (option && typeof option === "object") {

// myChart.setOption(option, true);

// }

第二点：label应该与itemstyle平级才可显示地图中的市级名称，

第三点：视觉引导线还是没弄出来，

代码下载地址：

百度云盘链接: /s/1EW8SIQAOWSE6EtTdpm83ag 密码: bntv

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。