<template>
<div>
<div class="map-box">
<div id="china_map_box">
<div id="china_map"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import '../../../node_modules/echarts/map/js/china';
export default {
data() {
return {
dataList2: [
{ name: '深圳', value: [113.88308, 22.55329], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 },
{ name: '永州', value: [111.59244, 26.46098], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 },
{ name: '长沙', value: [116.397128, 28.25591], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 }
],
// 指定图表的配置项和数据
option2: {
tooltip: {
show: false
},
// visualMap: {
// //左下角的渐变颜色条
// min: 0,
// max: 30,
// left: "left",
// top: "bottom",
// text: ["极高", "无数据"],
// inRange: {
// color: ["#e0ffff", "#006edd"],
// },
// show: true,
// },
geo: {
map: 'china',
roam: false, // 一定要关闭拖拽
zoom: 1.23,
center: [105, 36], // 调整地图位置
label: {
normal: {
show: false, //关闭省份名展示
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#77B0FF',
borderColor: '#fff',
borderWidth: 1 //设置外层边框
},
emphasis: {
areaColor: '#1677FE',
borderWidth: '#fff' //设置外层边框
}
}
},
series: [
{
type: 'map',
map: 'china',
roam: false,
mapType: 'china',
zoom: 1.23,
center: [105, 36],
// geoIndex: 1,
// aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#77B0FF',
borderColor: '#fff',
borderWidth: 0.5
},
emphasis: {
areaColor: '#1677FE',
borderColor: '#fff',
borderWidth: 0.5
}
},
data: this.dataList
},
// 普通效果
// {
// name: '',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: this.dataList,
// symbol: 'circle',
// symbolSize: 10,
// hoverSymbolSize: 12,
// tooltip: {
// // trigger: "axis", //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
// backgroundColor: '#FFF', //提示框浮层的背景颜色。
// textStyle: {
// color: '#505363'
// },
// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
// axisPointer: {
// type: 'none'
// },
// padding: [10, 15],
// formatter(value) {
// return (
// value.data.name +
// '<br/>' +
// '订单 ' +
// ': ' +
// value.data.orderNum +
// '(个)' +
// '<br/>' +
// '客户 ' +
// ': ' +
// value.data.clientNum +
// '(人)'
// );
// },
// show: true
// },
// encode: {
// value: 2
// },
// label: {
// formatter: '{b}',
// position: 'right',
// show: false
// },
// itemStyle: {
// color: '#ED691E'
// },
// emphasis: {
// label: {
// show: false
// }
// }
// }
{
// 涟漪效果
name: 'Top 6',
type: 'effectScatter',
coordinateSystem: 'geo', // 该系列使用的坐标系
data: this.dataList,
encode: {
value: 2 // 可以定义 data 的哪个维度被编码成什么.这里的意思是把data数据的第2项(从0开始)编译为value
},
showEffectOn: 'render', // 配置何时显示特效
rippleEffect: {
brushType: 'stroke',
color: 'red'
},
tooltip: {
// trigger: "axis", //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
backgroundColor: '#FFF', //提示框浮层的背景颜色。
textStyle: {
color: '#505363'
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
axisPointer: {
type: 'none'
},
padding: [10, 15],
formatter(value) {
return (
value.data.name +
'<br/>' +
'订单 ' +
': ' +
value.data.orderNum +
'(个)' +
'<br/>' +
'客户 ' +
': ' +
value.data.clientNum +
'(人)'
);
},
show: true
},
emphasis: {
scale: false
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(230, 10, 10, 1)',
color: 'red'
},
zlevel: 1
}
]
}
};
},
methods: {
//初始化中国地图
initEchartMap() {
let mapDiv = document.getElementById('china_map');
let myChart = echarts.init(mapDiv);
myChart.setOption(this.option2);
},
//修改echart配制
setEchartOption() {
console.log(this.option2);
this.option2.series[0]['data'] = this.dataList2;
this.option2.series[1]['data'] = this.dataList2;
}
},
created() {
this.setEchartOption();
},
mounted() {
this.$nextTick(() => {
this.initEchartMap();
});
}
};
</script>
<style scoped>
.map-box {
padding: 0px 0px 0px 16px;
background: #fff;
height: 323px;
}
#china_map {
width: 100%;
height: 273px;
}
</style>
echarts 中国地图只显示图标鼠标经过显示信息
于 2022-06-30 20:17:28 首次发布