效果图!
前提:是在vue的项目中用到的
全部代码(用到的东西在代码里面有写了)
- 地图文件的来源
- 1.本地安装echart插件,可以在(node_modules/echarts/map/json/province/shanghai.json)找到数据来源,里面有js和json两种,各个省份的都有
- 2.阿里云地图选择器地址: http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
<style lang="scss">
.o-echarts {
min-width: 30px;
min-height: 30px;
width: 800px;
height: 800px;
//可以控制地图的位置
left: 15px;
top: -30px;
}
</style>
<template>
<div id="echartMap" class="o-echarts" ></div>
</template>
<script>
import {registrationStatistics} from '@/api/business.js'
import echarts from 'echarts';
/**
* 地图文件的来源
* 1.本地安装echart插件,可以在(node_modules/echarts/map/json/province/shanghai.json)找到数据来源,里面有js和json两种,各个省份的都有
* 2.阿里云地图选择器地址:
* http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
*
*/
import JSON from '../../../components/Echarts/json/shanghai.json';//(手动修改过的数据)
export default {
name: 'echart-map',
data() {
return {
echartObj: null,
radioActive: 'A',
option: {
title: {
text: '',
top: '1%',
left: '8%',
textStyle: {
fontSize: 18,
fontWeight: 300,
color: '#b6d7ff'
}
},
//鼠标放上去的文字提示
tooltip: {
padding: 0,
backgroundColor: '#6B99FF',
padding: 10,
textStyle:{
color:'#fff',
lineHeight:'18px'
},
formatter: params => {
return params.name + '<br/>' + "共计:" + params.value + "家";
}
},
visualMap: {
min: 0,
max: 500,
top:'7%',
right:"84%",
show: true,
splitNumber: 5,
inRange: {
color: ['#6B99FF']
},
textStyle: {
color: '#444'
},
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
},
geo: {
map: '上海',
label: {
normal: {
show: true,
//地图中省份和数量的显示
formatter:this.formatter,
color: '#fff'
},
emphasis: {
show: true,
color: '#fff'
},
},
roam: false,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
areaColor: '#feb6aa' // hover效果
}
},
left: '5%',
right: '5%',
top: '5%',
bottom: '5%'
},
series: [{
name: '',
type: 'map',
mapType: 'shanghai',
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果
data: [],
}],
}
};
},
computed:{
_show:{
get:function () {
return this.show
},
set:function (newVal) {
this.$emit('update:show', newVal)
}
}
},
watch:{
show: {
immediate:true,//templat父组件中需要深度监听可以监听到
handler(newValue, oldValue) {
console.log(newValue)
console.log("进入到监听部分")
if(newValue){
this.$nextTick(()=>{ //此处使用这个可以等节点渲染后再获取节点
this.charts()
})
}
}
}
},
props:{
serviceTypeId:{
type:String,
},
//从后台接口获取来的数据
listArr:{
type:Array,
},
mouseenterFlag:{
type: Boolean,
default: false
},
show:{
type: Boolean,
default: false
},
},
mounted() {
},
methods: {
charts(){
this.$nextTick(() => {
this.echartObj = echarts.init(document.getElementById("echartMap"));
echarts.registerMap('上海', JSON);
console.log("==========JSON.features============")
console.log(JSON.features)
this.echartObj.setOption(this.getOptions(), true);
window.addEventListener('resize', () => {
if (this.echartObj && this.echartObj.resize) {
this.echartObj.resize();
}
})
});
},
getOptions() {
this.setOptions('series', (() => {
console.log(this.listArr)
const arr = [];
arr['push']({
// name: item,
type: 'map',
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果