<
template
>
<
div
>
<
div
:style="{width:
'90%',height:
height,}"
class=
"map"
ref=
"myEchart"
></
div
>
</
div
>
</
template
>
<
script
>
import
api
from
'@/fetch/api'
import
echarts
from
'echarts'
export
default {
props: {
areaCode: {
type:
String,
default:
"22"
},
max: {
type:
String,
default:
'500'
},
mapData: {// geo.json数据
type:
Object,
default: []
},
list: {
type:
Array,
default: []
},
height: {
type:
String,
default:
document.
documentElement.
clientHeight-
320+
'px'
}
},
data() {
return {
chart:
null,
chartData: [],
option: {
title : {
left:
'center',
textStyle:{
fontSize:
16,
}
}
},
}
},
mounted() {
this.
initChart();
},
methods: {
initChart() {
// 初始化
this.
chart =
echarts.
init(
this.
$refs.
myEchart);
this.
getAreaMapInfoList();
},
getAreaMapInfoList () {
// 获取地图数据
for(
var
i=
0;
i<
this.
mapData.
features.
length;
i++ ){
let
name =
this.
mapData.
features[
i].
properties.
name;
let
code =
this.
mapData.
features[
i].
properties.
code;
let
cp =
this.
mapData.
features[
i].
properties.
cp;
var
totalCount =
0;
for(
var
j=
0;
j<
this.
list.
length;
j++ ){
if(
this.
list[
j].
code ==
code){
totalCount =
this.
list[
j].
entNum;
break;
}
}
this.
chartData.
push({
name:
name,
value:
cp.
concat(
totalCount),
code:
code
});
}
//注册地图
echarts.
registerMap(
'jilin',
this.
mapData);
this.
renderMap(
'jilin',
this.
chartData);
},
renderMap(
map,
data){
//绘制地图
this.
option.
title.
subtext =
"";
//地理坐标系组件
this.
option.
geo = {
//引入地图 ，渲染地图凹凸显示
map:
map,
label: {
normal: {
show:
true,
color:
'#fff'
},
emphasis: {
show:
false,
color:
'#fff'
}
},
roam:
false,
//禁止缩放
zoom:
1,
itemStyle: {
normal: {
borderColor:
'#387ba7',
//地图边界线的颜色
areaColor:
'#1c3c63',
//地图整体区域的颜色
shadowColor:
'rgba(0, 0, 0, 0.5)',
shadowBlur:
10,
shadowOffsetX:
10
},
emphasis: {
areaColor:
'#132845'
//鼠标滑过的颜色
}
}
},
// 地图标点
this.
option.
series = [
{
name:
'点',
type:
'scatter',
coordinateSystem:
'geo',
symbol:
'pin',
//关系图节点标记的图形
symbolSize: [
30,
30],
symbolOffset: [
0,
'-40%'],
//关系图节点标记相对于原本位置的偏移。[0, '50%']
large :
true,
label: {
normal: {
show:
true,
textStyle: {
color:
'#fff',
fontSize:
9,
}
}
},
itemStyle : {
//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal : {
//默认样式
label : {
show :
true
},
borderType :
'solid',
//图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
borderColor :
'rgba(255,215,0,0.4)',
//设置图形边框为淡金色,透明度为0.4
borderWidth :
2,
//图形的描边线宽。为 0 时无描边。
opacity :
1
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis : {
//高亮状态
}
},
lineStyle : {
//==========关系边的公用线条样式。
normal : {
color :
'rgba(255,0,255,0.4)',
width :
'3',
type :
'dotted',
//线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
curveness :
0.3,
//线条的曲线程度，从0到1
opacity :
1
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis : {
//高亮状态
}
},
label : {
//=============图形上的文本标签
normal : {
show :
true,
//是否显示标签。
position :
'inside',
//标签的位置。['50%', '50%'] [x,y]
textStyle : {
//标签的字体样式
color :
'#cde6c7',
//字体颜色
fontStyle :
'normal',
//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight :
'bolder',
//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily :
'sans-serif',
//文字的字体系列
fontSize :
12,
//字体大小
}
},
emphasis : {
//高亮状态
}
},
edgeLabel : {
//==============线条的边缘标签
normal : {
show :
false
},
emphasis : {
//高亮状态
}
},
zlevel:
12,
data:
data,
}
];
//渲染地图
this.
chart.
setOption(
this.
option);
}
}
}
</
script
>
0
0
已为社区贡献1条内容
所有评论(0)