ECharts 省份地图 显示市区名称问题
页面做了四川省地图 想让显示市区名字 现在只有鼠标浮动上去才显示 查了官网 没找到怎么弄
<script src="${ctx}/static/js/page.js" type="text/javascript"></script>
<script src="${ctx}/static/echarts/map/china.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts/map/sichuan.js"></script>
var proMap = echarts.init(document.getElementById('proMap'));
proMap.resize();
proOption = {
backgroundColor:"#fff",
title: {
x:'center',
y:'2%',
textStyle:{
fontSize: 15,
fontWeight: 'bolder',
}
},
tooltip : {
trigger: 'item',
formatter: function(param){return '项目名称:'+ param.value[2]}
},
geo: {
map: '四川',
label: {
emphasis: {
show: true
}
} ,
roam:true,
itemStyle: {
normal: {
areaColor: '#45c8ff',
borderColor: '#fff'
},
emphasis: {
areaColor: '#00aeee'
}
}
},
visualMap: {
min: 0,
max: 100,
left: '20px',
top: 'bottom',
color:['#dd1d32','#325dc3','#429ffc','#3299fe','#79bcff','#9dcdfe','#bee0d0'],
text: ['高','低'], // 文本,默认为数值文本
calculable: true
},
series : [
{
name:'',
type: 'scatter',
coordinateSystem: 'geo',
selectedMode : 'single',
itemStyle:{
normal: {
color: '#ffe65d',
shadowBlur: 3,
shadowColor: '#fff',
},
},
roam:true,
data: [
{name: '甘孜藏族自治州', value: 100},
{name: '阿坝藏族羌族自治州', value: 10},
{name: '凉山彝族自治州', value: 20},
{name: '绵阳市', value: 30},
{name: '达州市',value: 30},
{name: '广元市',value:50},
{name: '雅安市',value: 50},
{name: '宜宾市',value: 50},
{name: '乐山市',value: 50},
{name: '南充市',value: 50},
{name: '巴中市',value: 50},
{name: '泸州市',value: 50},
{name: '成都市',value: 50},
{name: '资阳市',value: 50},
{name: '攀枝花市',value:50},
{name: '眉山市',value: 50},
{name: '广安市',value: 50},
{name: '德阳市',value:50},
{name: '内江市',value: 50},
{name: '遂宁市',value: 50},
{name: '自贡市 ',value: 50},
]
/* function(){
var data = eval('${mapListP}');
return data;
} ()*/
}
]
};
proMap.setOption(proOption);
更多 0
想要的是这种
结果这种
<script src="${ctx}/static/js/page.js" type="text/javascript"></script>
<script src="${ctx}/static/echarts/map/china.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts/map/sichuan.js"></script>
var proMap = echarts.init(document.getElementById('proMap'));
proMap.resize();
proOption = {
backgroundColor:"#fff",
title: {
x:'center',
y:'2%',
textStyle:{
fontSize: 15,
fontWeight: 'bolder',
}
},
tooltip : {
trigger: 'item',
formatter: function(param){return '项目名称:'+ param.value[2]}
},
geo: {
map: '四川',
label: {
emphasis: {
show: true
}
} ,
roam:true,
itemStyle: {
normal: {
areaColor: '#45c8ff',
borderColor: '#fff'
},
emphasis: {
areaColor: '#00aeee'
}
}
},
visualMap: {
min: 0,
max: 100,
left: '20px',
top: 'bottom',
color:['#dd1d32','#325dc3','#429ffc','#3299fe','#79bcff','#9dcdfe','#bee0d0'],
text: ['高','低'], // 文本,默认为数值文本
calculable: true
},
series : [
{
name:'',
type: 'scatter',
coordinateSystem: 'geo',
selectedMode : 'single',
itemStyle:{
normal: {
color: '#ffe65d',
shadowBlur: 3,
shadowColor: '#fff',
},
},
roam:true,
data: [
{name: '甘孜藏族自治州', value: 100},
{name: '阿坝藏族羌族自治州', value: 10},
{name: '凉山彝族自治州', value: 20},
{name: '绵阳市', value: 30},
{name: '达州市',value: 30},
{name: '广元市',value:50},
{name: '雅安市',value: 50},
{name: '宜宾市',value: 50},
{name: '乐山市',value: 50},
{name: '南充市',value: 50},
{name: '巴中市',value: 50},
{name: '泸州市',value: 50},
{name: '成都市',value: 50},
{name: '资阳市',value: 50},
{name: '攀枝花市',value:50},
{name: '眉山市',value: 50},
{name: '广安市',value: 50},
{name: '德阳市',value:50},
{name: '内江市',value: 50},
{name: '遂宁市',value: 50},
{name: '自贡市 ',value: 50},
]
/* function(){
var data = eval('${mapListP}');
return data;
} ()*/
}
]
};
proMap.setOption(proOption);
更多 0
想要的是这种

结果这种

...全文
相关推荐
echarts地图省市区三级下钻联动
vue echarts地图三级下钻,默认全国地图,例如点击湖北省进入湖北省地图,然后点击武汉进入武汉市地图,点击上一级返回,Vue写法,js写法类似
echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称
1.中国地图使用geo3d 和scatter3D做文字图层,用map3d实现点击可以获取省份信息,如果单独使用geo3d,无法获取到点击的省份信息。还有一些思路写在代码中了。2.对不同省份进行区分(项目涉及到省份排名之类的);3. 点击进入不同省份 展示各个省份的市区信息;4. 在省份地图上添加marker;
echarts实现河南各省市区县地图(河南省各省市区县地图json文件可以在我博客里下载)
前言:最近公司项目有个需求,展示河南省各省市区县的地图,并展示相应的数据,看了些资料决定用echarts实现。 一、完成之后的效果图 点击市的模块显示对应的市,并显示对应市的数据 点击区县的模块显示对应的区县,并显示对应区县的数据 二、实现方法 1、首先要确定已经引入的echart的文件,vue项目和html项目的引入方法不一样,在此不再赘述,童鞋们自行百度。 2、把需要用到的json文件放到本地(json文件获取的方法后续我会上传,童鞋们自行下载),在此我放到了static目录下,如下图: 3、页
Echarts全国及各省份地图
共享Echarts全国所有市地图的JSON文件。弥补官网不能下载的问题。
echarts地图下钻省市区展示,vue版
单击下钻至下一层地图展示,最低可到区级,双击返回全国地图,鼠标停于散点之上时,信息框提示当前散点对应的城市名称


