271 lines
11 KiB
JavaScript
271 lines
11 KiB
JavaScript
|
/**
|
|||
|
|
* 顶部header
|
|||
|
|
*/
|
|||
|
|
Vue.component("china-map", {
|
|||
|
|
template: `
|
|||
|
|
<div :style="{'height': height+'px'}" ref="map"></div>
|
|||
|
|
`,
|
|||
|
|
props: {
|
|||
|
|
data:{
|
|||
|
|
type:Array
|
|||
|
|
},
|
|||
|
|
height:{
|
|||
|
|
type:Number
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
option:{}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.loadMap(this.data)
|
|||
|
|
window.chartClick = this.chartClick;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
chartClick(id){
|
|||
|
|
this.$emit('projectid',id)
|
|||
|
|
},
|
|||
|
|
loadMap(outdata) {
|
|||
|
|
console.log()
|
|||
|
|
|
|||
|
|
|
|||
|
|
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;border: 2px solid #265dad">'
|
|||
|
|
+'<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:16, //省会字体大小
|
|||
|
|
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:16, //省会字体大小
|
|||
|
|
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|