页面图表插件echartsmap用法
H5周
帮助1人
1.案例效果图展示
2.地图缩放和平移
与地图缩放和平移功能有关的字段属性有：
● roam[boolean, string]:是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启● zoom[number]: 当前视角的缩放比例● scaleLimit[object]: 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
配置项geo和 series中具体代码如下：
aspectScale: 0.75, // 地图的长宽比
z:1,
zoom:1.2, // 当前视角的缩放比例。
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.8,
max: 1.6
},
3.整个地图和地图某一区域阴影效果
整个地图实现阴影或者3D效果，需要echarts中配置项geo和series中同时设置阴影效果（或者series系列数组中设置2个元素），series浮在geo上面,二者中series的z的值要大于geo中z的值，并且geo相对series有阴影偏移距离，注意在series中的itemstyle中不设置shadowOffsetX和shadowOffsetY；地图中某一区域的阴影效果可以在data数据中具体的元素中对itemStyle进行设置，具体代码如下：
itemStyle: {
normal: {
areaColor: "#d0b6de",// 地图区域的颜色
shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
borderColor:'#503d27',
borderWidth: 1,
shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowOffsetX:6, // 阴影水平方向上的偏移距离。
shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
},
emphasis: {
label:{
show:false
}
}
4. 地图中某一区域数据单独展示
在data数组中某一个元素中的itemStyle下的label属性show，为true时，默认展示name属性，注意不要设置全局的itemStyle下的label属性show为true，代码如下：
label: {
normal: {
show: true,
color: '#333333',
fontSize: 40*that.relativeRate,
fontFamily: 'PingFangSC-Regula',
},
emphasis: {
show: true
}
},
５. 地图中某一区域默认高亮显示
echarts的API中dispatchAction可以触发图表行为，所有要实现高亮显示，就是用echarts实例脚本触发地图中某一区域的点击效果，具体代码如下：
/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'hideTip',// 图表行为
seriesIndex: 0,// series系列 索引
dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
/**触发显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
/**触发地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
６. data中数据自动触发被选中高亮显示循环播放
在这里显然需要用到周期定时器setInterval来实现循环触发高亮展示，同时也用到echarts API中的实例方法dispatchAction和action类型，具体脚本代码如下：
var intervalID = setInterval(function(){
/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'hideTip',// 图表行为
seriesIndex: 0,// series系列 索引
dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
/**触发显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
/**触发地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
preIndex = currIndex;
currIndex ;
currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
７.取消自动触发选中和高亮，取消循环展示
从5和6中可以得知，取消循环即取消周期定时器，即：clearInterval(intervalID)，取消选中和高亮，就是dispatchAction中type的值分别为”hideTip”和”mapUnSelect”，具体脚本如下：
取消显示提示框showTip行为
/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'hideTip',// 图表行为
seriesIndex: 0,// series系列 索引
dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
８.案例完整代码如下：
echarts中map组件的使用，可以vue中安装echarts，也可以手动引入地图的json数据（例如：chain.json）。当手动引入map的json数据时，需要先注册地图，在创建地图实例，即：echarts.registerMap("china", response.data);
具体代码如下：
let mapDom = that.$refs['heating-power-map'];
let data = [
{name: '黑龙江', value: 2500,
itemStyle: {
normal:{
areaColor: 'rgba(44,101,193,.3)',
/* shadowColor: 'rgba(12, 123, 34, 0.5)',
shadowBlur: 100,
shadowOffsetX:10,
shadowOffsetY:10*/
shadowColor: '#433ff9',
shadowBlur: 0,
},
emphasis: {
show:true,
},
},
label: {
normal: {
show: true,
color: '#333333',
fontSize: 40*that.relativeRate,
fontFamily: 'PingFangSC-Regula',
},
emphasis: {
show: true
}
},
},
{
name: '内蒙古',
value: 200,
itemStyle: { // 每个地区区域也可以单独设置样式，优先级高于统一设置的样式
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 10,
/*shadowOffsetY: 5,
shadowOffsetX: 5,*/
},
},
{name: '新疆', value: 2500, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '西藏', value: 200, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '云南', value: 2500, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '广东', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '福建', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '山东', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
}
];
let option2 = {
backgroundColor: '#33287f', // 设置地图画布的背景色
tooltip: { // 提示框组件
show: true, // 是否显示提示框组件
trigger: 'item', // 触发类型。
backgroundColor: 'rgba(248,248,255,.9)',
borderWidth: 0,
confine: true,
/*position: 'right',*/
textStyle: { // 提示框浮层的文本样式。
color: 'rgba(0,0,0,.9)'
},
formatter:function(a){ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let returnContent = ''
if(a.value != undefined && a.value != '' && a.name != undefined && a.name != ''){
returnContent = a.name '分公司<br>' '标保值：' a.value;
}
return returnContent;
},
tiggerOn: 'mousemove|click',
/*extraCssText:'width:100px;height:200px;',*/
/*extraCssText:'width:100*that.relativeRate;height:200*that.relativeRate;',*/
},
geo: {
map: "china", // 地图类型
center: [105.194115019531, 35.582111640625], // 当前视角的中心点，用经纬度表示
aspectScale: 0.75, // 地图的长宽比
zoom:1.2, // 当前视角的缩放比例。
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.8,
max: 1.6
},
itemStyle: {
normal: {
areaColor: "#d0b6de",// 地图区域的颜色
shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
borderColor:'#503d27',
borderWidth: 1,
shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowOffsetX:6, // 阴影水平方向上的偏移距离。
shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
},
emphasis: {
label:{
show:false
}
}
}
},
series: [
{
type: "map",
map: "china",
center: [105.194115019531, 35.582111640625],
zoom:1.2,
geoIndex: 1,
aspectScale: 0.75, //长宽比
roam: 'scale',
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.8,
max: 1.6
},
emphasis: {
label:{
show:true
}
},
itemStyle: {
normal: {
areaColor: "rgba(126,203,255,1)", // 地图区域的颜色
borderColor: "#fdfffd", // 地图区域图形的描边颜色 当前不支持整个地图的描边颜色
borderWidth: 1, // 描边线宽。为 0 时无描边,number类型
}
},
data:data,
}
]
};
// that.echarts.registerMap("china", response.data);
that.chianMap = that.echarts.init(mapDom);
that.chianMap.setOption(option2);
that.chianMap.dispatchAction({
type: 'showTip', // 图表行为
seriesIndex: 0, // series系列 索引
dataIndex: 0 // 序列data中数据元素的索引
})
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: 0
});
var op = that.chianMap.getOption();
var dataOption = op.series[0].data;
var dataOptionLength = data.length;
var currIndex = 1,preIndex;
/**数据自动触发被选中高亮显示**/
var intervalID = setInterval(function(){
/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'hideTip',// 图表行为
seriesIndex: 0,// series系列 索引
dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
/**触发显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
/**触发地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
preIndex = currIndex;
currIndex ;
currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
var intervalFlag = true;//是否启动自动触发
that.chianMap.on('click', e=>{ // 处理click事件
e.dataIndex < dataOptionLength ? currIndex = e.dataIndex 1 : currIndex = 0; // 手动点击，重置currIndex为当前点击区域的下一个区域
if(intervalFlag){
/**取消数据自动触发被选中高亮显示**/
clearInterval(intervalID);
if(preIndex != currIndex){
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: preIndex
});
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: preIndex
});
}
}else{
intervalID = setInterval(function(){
that.chianMap.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: currIndex-1
});
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
preIndex = currIndex;
currIndex ;
currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
}
intervalFlag = !intervalFlag;
});
9.实例完整代码
<template>
<div class="heating-power">
<!-- 全国热力图 -->
<span >全国热力图</span>
<div class="heating-power-map" id="heating-power-map" ref="heating-power-map">
</div>
</div>
</template>
<script>
import echarts from "../js/echarts";
import axios from "axios";
import '../../node_modules/echarts/map/js/china.js' // 或者注册地图that.echarts.registerMap("china", response.data);
export default {
name: "Maps",
mounted(){
this.getChinaMap();
},
methods:{
/**全国热力图**/
getChinaMap: function (mapData1, mapData2, mapData3) {
let that = this;
axios.get("static/json/chinamap.json")
.then(function(response){
let mapDom = that.$refs['heating-power-map'];
let data = [
{name: '黑龙江', value: 2500,
itemStyle: {
normal:{
areaColor: 'rgba(44,101,193,.3)',
/* shadowColor: 'rgba(12, 123, 34, 0.5)',
shadowBlur: 100,
shadowOffsetX:10,
shadowOffsetY:10*/
shadowColor: '#433ff9',
shadowBlur: 0,
},
emphasis: {
show:true,
},
},
label: {
normal: {
show: true,
color: '#333333',
fontSize: 40*that.relativeRate,
fontFamily: 'PingFangSC-Regula',
},
emphasis: {
show: true
}
},
},
{
name: '内蒙古',
value: 200,
itemStyle: { // 每个地区区域也可以单独设置样式，优先级高于统一设置的样式
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 10,
/*shadowOffsetY: 5,
shadowOffsetX: 5,*/
},
},
{name: '新疆', value: 2500, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '西藏', value: 200, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '云南', value: 2500, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '广东', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '福建', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
},
{name: '山东', value: 2000, itemStyle: {
areaColor: 'rgba(44,101,193,.3)',
shadowColor: '#433ff9',
shadowBlur: 0,
},
}
];
let option2 = {
backgroundColor: '#33287f', // 设置地图画布的背景色
tooltip: { // 提示框组件
show: true, // 是否显示提示框组件
trigger: 'item', // 触发类型。
backgroundColor: 'rgba(248,248,255,.9)',
borderWidth: 0,
confine: true,
/*position: 'right',*/
textStyle: { // 提示框浮层的文本样式。
color: 'rgba(0,0,0,.9)'
},
formatter:function(a){ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let returnContent = ''
if(a.value != undefined && a.value != '' && a.name != undefined && a.name != ''){
returnContent = a.name '分公司<br>' '标保值：' a.value;
}
return returnContent;
},
tiggerOn: 'mousemove|click',
/*extraCssText:'width:100px;height:200px;',*/
/*extraCssText:'width:100*that.relativeRate;height:200*that.relativeRate;',*/
},
geo: {
map: "china", // 地图类型
center: [105.194115019531, 35.582111640625], // 当前视角的中心点，用经纬度表示
aspectScale: 0.75, // 地图的长宽比
z:1,
zoom:1.2, // 当前视角的缩放比例。
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.8,
max: 1.6
},
itemStyle: {
normal: {
areaColor: "#d0b6de",// 地图区域的颜色
shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
borderColor:'#503d27',
borderWidth: 1,
shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowOffsetX:6, // 阴影水平方向上的偏移距离。
shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
},
emphasis: {
label:{
show:false
}
}
}
},
series: [
{
type: "map",
map: "china",
center: [105.194115019531, 35.582111640625],
zoom:1.2,
z:2,
/*geoIndex: 1,*/
aspectScale: 0.75, //长宽比
roam: 'scale',
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.8,
max: 1.6
},
emphasis: {
label:{
show:true
}
},
itemStyle: {
normal: {
areaColor: "rgba(126,203,255,1)", // 地图区域的颜色
borderColor: "#fdfffd", // 地图区域图形的描边颜色 当前不支持整个地图的描边颜色
borderWidth: 1, // 描边线宽。为 0 时无描边,number类型
}
},
data:data,
}
]
};
// that.echarts.registerMap("china", response.data);
that.chianMap = that.echarts.init(mapDom);
that.chianMap.setOption(option2);
that.chianMap.dispatchAction({
type: 'showTip', // 图表行为
seriesIndex: 0, // series系列 索引
dataIndex: 0 // 序列data中数据元素的索引
})
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: 0
});
var op = that.chianMap.getOption();
var dataOption = op.series[0].data;
var dataOptionLength = data.length;
var currIndex = 1,preIndex;
/**数据自动触发被选中高亮显示**/
var intervalID = setInterval(function(){
/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'hideTip',// 图表行为
seriesIndex: 0,// series系列 索引
dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
/**触发显示提示框showTip行为**/
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
/**触发地图选中行为**/
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
preIndex = currIndex;
currIndex ;
currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
var intervalFlag = true;//是否启动自动触发
that.chianMap.on('click', e=>{ // 处理click事件
e.dataIndex < dataOptionLength ? currIndex = e.dataIndex 1 : currIndex = 0; // 手动点击，重置currIndex为当前点击区域的下一个区域
if(intervalFlag){
/**取消数据自动触发被选中高亮显示**/
clearInterval(intervalID);
if(preIndex != currIndex){
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: preIndex
});
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: preIndex
});
}
}else{
intervalID = setInterval(function(){
that.chianMap.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: currIndex-1
});
that.chianMap.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: currIndex-1
});
that.chianMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currIndex
});
that.chianMap.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: currIndex
});
preIndex = currIndex;
currIndex ;
currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
}
intervalFlag = !intervalFlag;
});
})
.catch(function (error) {
console.log(error);
});
},
clickMap: function (e) {
console.log(e);
},
},
}
</script>
<style scoped>
.heating-power{
margin-top: .26rem;
display: flex;
flex-direction: column;
position: relative;
}
.heating-power span{
font-family: PingFangSC-Regular;
font-size: .34rem;
color: #393E52;
letter-spacing: 0;
margin-left: .56rem;
}
.heating-power span:after{
position: absolute;
content: '';
width: .05rem;
height: .4rem;
left: .32rem;
background-image: linear-gradient(0deg, #96D7FE 18%, #1673D2 100%);
border-radius: .15rem;
}
.heating-power-map{
width: 100%;
/* height: 4.62rem;
width: 7rem;*/
height: 7rem;
margin-left: .2rem;
margin-top: .35rem;
padding-bottom: .25rem;
/*background-color: rgba(10,22,58,.8);*/
/* border-bottom: .01rem solid #CECECE;*/
/*background-color: red;*/
}
</style>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhiahjci
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22
