271 lines
11 KiB
JavaScript
271 lines
11 KiB
JavaScript
/**
|
||
* 顶部header
|
||
*/
|
||
Vue.component("china-map-copy", {
|
||
template: `
|
||
<div :style="{'height': height+'px'}" ref="map"></div>
|
||
`,
|
||
props: {
|
||
data:{
|
||
type:Array
|
||
},
|
||
height:{
|
||
type:Number
|
||
},
|
||
projectid:{
|
||
type:Number
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
option:{}
|
||
}
|
||
},
|
||
mounted(){
|
||
this.loadMap(this.data)
|
||
window.chartClick = this.chartClick;
|
||
},
|
||
methods: {
|
||
chartClick(id){
|
||
this.$emit('projectid',id)
|
||
},
|
||
loadMap(outdata) {
|
||
var myChart = echarts.init(this.$refs.map);
|
||
var max =1000,
|
||
min = 1;
|
||
var maxSize4Pin = 100,
|
||
minSize4Pin = 20;
|
||
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;
|
||
});
|
||
|
||
var convertData = function(outdata) {
|
||
var res = [];
|
||
for (var i = 0; i < outdata.length; i++) {
|
||
var geoCoord = geoCoordMap[outdata[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: outdata[i].name,
|
||
value: geoCoord.concat(outdata[i].count),
|
||
items: outdata[i].items,
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
this.option = {
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
enterable: true,
|
||
showContent: true,
|
||
padding:0,
|
||
triggerOn:'click',
|
||
formatter: function(params) {
|
||
var tipHtml = ''
|
||
if(params.data){
|
||
tipHtml += '<div style="background:rgba(22,80,158,0.5);padding: 0 10px;">'
|
||
+'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;">'+'</i>'
|
||
+'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.data.name+' （项目总数：'+params.data.value[2]+'）'+'</span>'+'</div>'
|
||
+'<div style="padding:5px;max-height: 350px;overflow: auto" class="china-map">'
|
||
for(var i=0;i<params.data.items.length;i++){
|
||
tipHtml += '<p style="color:#11ee7d;padding:8px 0;cursor: pointer" onclick="chartClick('+params.data.items[i].id+')">'+params.data.items[i].projectName+'</p>'
|
||
}
|
||
tipHtml += '</div>'
|
||
+'</div>';
|
||
return tipHtml
|
||
}
|
||
},
|
||
},
|
||
geo: {
|
||
map: 'china',
|
||
show: true,
|
||
roam: false,
|
||
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: "scatter",
|
||
coordinateSystem: "geo",
|
||
symbolSize:25,
|
||
label: {
|
||
normal: {
|
||
formatter: "{b}",
|
||
position: "top",
|
||
show: true,
|
||
fontSize:14, //省会字体大小
|
||
fontWeight: "bold",
|
||
color: "#ffffff",
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
data: convertData(outdata),
|
||
},
|
||
{
|
||
type: 'map',
|
||
roam: false,
|
||
zoom: 1.15,
|
||
map: 'china', //使用
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize:14, //省会字体大小
|
||
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
}
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
color: '#11ee7d', //指上省会字体颜色
|
||
}
|
||
},
|
||
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: '#11ee7d',
|
||
|
||
}
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
rippleEffect: {
|
||
brushType: 'stroke',//fill
|
||
period: 2,
|
||
scale: 3,
|
||
},
|
||
showEffectOn: 'render',
|
||
symbol: 'circle',
|
||
symbolSize:25,
|
||
zlevel: 1,
|
||
/*symbolSize: function(val) {
|
||
if (val[2] === 0) {
|
||
return 0;
|
||
}
|
||
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||
var b = maxSize4Pin - a * max;
|
||
return a * val[2] + b * 1.2;
|
||
},*/
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: {
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.5,
|
||
r: 0.5,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(129,229,255,1)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(129,229,255,1)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(129,229,255,1)'
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
color: '#fff',
|
||
fontWeight: 'bold',
|
||
position: 'inside',// inside 中间
|
||
formatter: function(para) {
|
||
return '{cnNum|' + para.data.value[2] + '}'
|
||
},
|
||
rich: {
|
||
cnNum: {
|
||
fontSize: 16,
|
||
color: '#000000',
|
||
fontWeight:'bold',
|
||
}
|
||
}
|
||
},
|
||
},
|
||
data: convertData(outdata),
|
||
|
||
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(this.option);
|
||
}
|
||
},
|
||
watch:{
|
||
data: function (n,o) {
|
||
this.loadMap(this.data)
|
||
}
|
||
}
|
||
|
||
})
|