<template>
<div class="echarts">
<div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
export default {
name: "echarts",
props: ["userJson"],
data() {
return {
chart: null,
myChart:'',
option:{
backgroundColor: "#fff",
tooltip: {
show:false,
}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 10,
max: 60,
text:['High','Low'],
realtime: false,
calculable: false,
color: [
'#cc3304',
'#5ca4e4',
'#f97a06',
'#80C21D',
'#8C3C99',
'#1962be'
]
},
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图
roam: false,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.7)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
type: 'scatter',
coordinateSystem: 'geo', // 对应上方配置
itemStyle:{
emphasis:{label:{show:true}} //鼠标移入城市名称是否展示
},
},
{
name: '查看详情', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [{
value:50,
name: '北京',
}, {value:10,
name: '浙江'
}, {
value:50,
name: '天津',
}, {value:10,
name: '安徽'
}, {value:10,
name: '上海'
}, {value:10,
name: '福建'
}, {value:10,
name: '江西'
}, {value:10,
name: '山东'
}, {value:1,
name: '河南'
}, {value:20,
name: '湖北'
}, {value:20,
name: '湖南'
}, {value:20,
name: '广东'
}, {value:20,
name: '海南'
}, {value:50,
name: '山西',
}, {value:10,
name: '江苏'
}, {
value:30,
name: '辽宁',
}, {
value:30,
name: '吉林',
}, {value:40,
name: '台湾'
}, {
value:50,
name: '河北',
}, {
value:30,
name: '黑龙江',
}, {value:20,
name: '香港'
}, {value:20,
name: '澳门'
}, {value:20,
name: '广西'
},
{
value:50,
name: '内蒙古',
},
{value:40,
name: '宁夏'
}, {value:40,
name: '新疆'
},{value:40,
name: '青海'
},{value:40,
name: '甘肃'
},{value:40,
name: '陕西'
},{value:60,
name: '西藏',
},{value:60,
name: '贵州',
}, {value:60,
name: '四川',
}, {value:60,
name: '云南',
},{value:60,
name: '重庆',
}, ]
}
]
}
};
},
mounted() {
this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
this.myChart.setOption(this.option);
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
var _this = this;
window.onresize = _this.myChart.resize;
this.myChart.on('click', function(params){
_this.$router.push({
path:'/home/subhome/enrollplan/'+params.name,
})
});
},
}
}
</script>
<style scoped lang="less">
.echarts{
width: 100%;
height: 900px;
>div{
width: 90%;
margin: 0 auto;
}
}
</style>
网友评论