187 lines
6.7 KiB
JavaScript
187 lines
6.7 KiB
JavaScript
|
/**
|
||
|
|
* 顶部header
|
||
|
|
*/
|
||
|
|
Vue.component("labour-china-map", {
|
||
|
|
template: `
|
||
|
|
<div :style="{'height': height+'px'}" ref="map"></div>
|
||
|
|
`,
|
||
|
|
props: {
|
||
|
|
data:{
|
||
|
|
type:Array
|
||
|
|
},
|
||
|
|
tooltip:{
|
||
|
|
type:Array
|
||
|
|
},
|
||
|
|
height:{
|
||
|
|
type:Number
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
option:{},
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.loadMap(this.data,this.tooltip)
|
||
|
|
window.chartClick = this.chartClick;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chartClick(id){
|
||
|
|
|
||
|
|
this.$emit('projectid',id)
|
||
|
|
},
|
||
|
|
loadMap(outdata,tooltip) {
|
||
|
|
var iconGD = "image://http://fileimg.makalu.cc/WEB_0EE6DA50925A4C27A126669209F1A5E2.png";
|
||
|
|
var myChart = echarts.init(this.$refs.map);
|
||
|
|
var geoCoordMap = {};
|
||
|
|
/*获取地图数据*/
|
||
|
|
var mapFeatures = echarts.getMap('china').geoJson.features;
|
||
|
|
// console.log(mapFeatures)
|
||
|
|
mapFeatures.forEach(function(v) {
|
||
|
|
// 地区名称
|
||
|
|
var name = v.properties.name;
|
||
|
|
// 地区经纬度
|
||
|
|
geoCoordMap[name] = v.properties.cp;
|
||
|
|
});
|
||
|
|
this.option = {
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
trigger: "item",
|
||
|
|
enterable: true,
|
||
|
|
showContent: true,
|
||
|
|
padding:0,
|
||
|
|
triggerOn:'click',
|
||
|
|
formatter: function(params) {
|
||
|
|
var tipHtml = ''
|
||
|
|
console.log(params.dataIndex)
|
||
|
|
if(params.data){
|
||
|
|
tipHtml = tooltip[params.dataIndex]
|
||
|
|
return tipHtml
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
geo: {
|
||
|
|
map: 'china',
|
||
|
|
show: true,
|
||
|
|
roam: true,
|
||
|
|
zoom: 1.17,
|
||
|
|
label: {
|
||
|
|
emphasis: {
|
||
|
|
show: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
layoutSize: "100%",
|
||
|
|
itemStyle: {
|
||
|
|
// normal: {
|
||
|
|
// areaColor: '#000', //背景颜色
|
||
|
|
// borderColor: '#8ac2fb', //省划分边线
|
||
|
|
// borderWidth: 10, //边线的粗细
|
||
|
|
// },
|
||
|
|
// emphasis: {
|
||
|
|
// areaColor: '#002d90' , //指上背景限色
|
||
|
|
// },
|
||
|
|
areaColor: "#86c2f8",
|
||
|
|
borderColor: "#86c2f8",
|
||
|
|
shadowColor: "#86c2f8",
|
||
|
|
shadowBlur: 25,
|
||
|
|
borderWidth: 5,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
type: 'map',
|
||
|
|
roam: true,
|
||
|
|
zoom: 1.15,
|
||
|
|
map: 'china', //使用
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
fontSize:20, //省会字体大小
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false,
|
||
|
|
color: '#ffffff', //指上省会字体颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaColor: {
|
||
|
|
type: "radial",
|
||
|
|
x: 0.5,
|
||
|
|
y: 0.5,
|
||
|
|
r: 0.8,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "#1c2a4c", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#1f335e", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
globalCoord: true, // 缺省为 false
|
||
|
|
},
|
||
|
|
shadowColor: "rgb(58,115,192)",
|
||
|
|
borderColor: '#8ac2fb'
|
||
|
|
},
|
||
|
|
// normal: {
|
||
|
|
// areaColor: '#141e37', //背景颜色
|
||
|
|
// borderColor: '#8ac2fb', //省划分边线
|
||
|
|
// borderWidth: 1, //边线的粗细
|
||
|
|
// },
|
||
|
|
emphasis: {
|
||
|
|
areaColor: '#22578b' , //指上背景限色
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'scatter', //effectScatter 水波纹效果 scatter 无效果
|
||
|
|
coordinateSystem: 'geo',
|
||
|
|
rippleEffect: {
|
||
|
|
brushType: 'stroke'
|
||
|
|
},
|
||
|
|
showEffectOn: 'render',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbolSize: 35,
|
||
|
|
symbol: iconGD,
|
||
|
|
data: outdata,
|
||
|
|
zlevel: 1,
|
||
|
|
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChart.setOption(this.option);
|
||
|
|
|
||
|
|
myChart.on('georoam', function(params) {
|
||
|
|
var option = myChart.getOption(); //获得option对象
|
||
|
|
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
|
||
|
|
option.geo[0].zoom = option.series[0].zoom+0.02; //下层geo的缩放等级跟着上层的geo一起改变
|
||
|
|
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
||
|
|
} else { //捕捉到拖曳时
|
||
|
|
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
||
|
|
}
|
||
|
|
myChart.setOption(option); //设置option
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
data: function (n,o) {
|
||
|
|
this.loadMap(this.data,this.tooltip)
|
||
|
|
window.chartClick = this.chartClick;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|