// 数据格式
linesData: [
[
{
//企业
coord: [87.33123, 44.00828],
fromName: "企业1",
level: 1
},
{
coord: [108.479, 23.1152],
toName: "",
value: 100
}
]
], // map数据
drawChart1() {
this.echart1 = this.$echarts.init(
document.getElementById("chartContainer1")
);
let that = this;
let areaColors = ["#FF4444", "#FF9500", "#3593FF", "#0DD567"]; //高到低
let series = [];
[this.linesData].forEach(item => {
series.push(
// 企业点 样式
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 10, //动画时间,值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 3 //波纹圆环最大原6
},
label: {
normal: {
show: true,
position: "right", // 文字位置
offset: [10, 0], // 偏移设置
formatter: "{b}", // 圆环显示文字
textStyle: {
fontWeight: "bold"
}
},
emphasis: {
show: true
}
},
symbol: "circle",
symbolSize: 15, //原7.5
color: function (param) {
let level = param.value[3];
if (level === 1)
return "#C83F11";
if (level === 2)
return "#FF9500";
if (level === 3)
return "#3593FF";
if (level === 4)
return "#0DD567";
},
itemStyle: {
normal: {
show: false
}
},
data: item.map(function (dataItem) {
let name = dataItem[0].fromName; // 企业名称
return {
name: name,
value: dataItem[0].coord.concat([
dataItem[0].fromName, dataItem[0].level
]),
visualMap: false
};
})
},
// 流线 箭头 样式
{
type: "lines",
zlevel: 2,
// 箭头图标的样式、速度
effect: {
show: true,
period: 5, // 箭头指向速度,值越小速度越快
trailLength: 0.1, // 特效尾迹长度[0,1]
symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小
color: "#fff" // 箭头颜色
},
// 尾部 线的样式
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 0, // 尾迹线条透明度
curveness: 0.1 //尾迹线条曲直度
}
},
// data: convertData(item[1])
data: item
},
// 流入点样式
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill不动
scale: 0 //波纹圆环最大小
},
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}", //圆环显示文字
color: "#F8E71C" //攻击点文字颜色
},
emphasis: {
show: true
}
},
symbol: "circle",
symbolSize: function (val) {
return 3; //圆环大小
},
itemStyle: {
normal: {
show: false,
//流入点图标颜色
color: "#F8E71C",
shadowBlur: 5,
shadowColor: "#F8E71C"
}
},
data: item.map(function (dataItem) {
return {
name: dataItem[1].toName,
value: dataItem[1].coord.concat([
dataItem[1].value
]),
visualMap: false
};
})
}
);
});
let option = {
grid: {
left: 10,
bottom: "5%",
width: "10%",
height: 100
},
xAxis: {
show: false
},
yAxis: {
type: "category",
inverse: true,
nameGap: 16,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
margin: 0,
textStyle: {
color: "#fff",
align: "left",
fontSize: 12
},
rich: {
a: {
color: "transparent",
backgroundColor: areaColors[0],
width: 8,
height: 8,
align: "center",
borderRadius: 4
},
b: {
color: "transparent",
backgroundColor: areaColors[1],
width: 8,
height: 8,
align: "center",
borderRadius: 4
},
c: {
color: "transparent",
backgroundColor: areaColors[2],
width: 8,
height: 8,
align: "center",
borderRadius: 4
},
d: {
color: "transparent",
backgroundColor: areaColors[3],
width: 8,
height: 8,
align: "center",
borderRadius: 4
}
},
formatter: function (params) {
if (parseInt(params.slice(0, 1)) == 0) {
return [
"{a|" + 0 + "}" + " " + params.slice(1)
].join("\n");
} else if (parseInt(params.slice(0, 1)) == 1) {
return [
"{b|" + 0 + "}" + " " + params.slice(1)
].join("\n");
} else if (parseInt(params.slice(0, 1)) == 2) {
return [
"{c|" + 0 + "}" + " " + params.slice(1)
].join("\n");
} else if (parseInt(params.slice(0, 1)) == 3) {
return [
"{d|" + 0 + "}" + " " + params.slice(1)
].join("\n");
}
}
},
data: ["0高", "1中高", "2中", "3低"]
},
tooltip: {
backgroundColor: "rgba(11, 37, 103, 0.7)",
borderColor: "#FFFFCC",
padding: 10,
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: "z-index:100",
position: function (p) {
return [p[0] + 20, p[1] + 10];
},
formatter: function (params, ticket, callback) {
let enterpriseName = params.value[2];
// 鼠标触摸 要显示的内容
let res = "";
// 判断当前点是否在自定义的列表中
if (that.enterprises.indexOf(enterpriseName) !== -1) {
res = `<p style="white-space:normal; width: 200px;word-break:break-all;">${params.marker}${enterpriseName}</p>
<table style='font-size:12px; border-collapse: collapse; width: 200px;display:flex;'>
<tr>
<th style="border: 1px solid #41c4ff; text-align:center; padding:3px;flex:1">事件数量</th>
<th style="border: 1px solid #41c4ff; text-align:center; padding:3px;flex:1">安全指数等级</th>
</tr>
<tr>
<td style="border: 1px solid #41c4ff; text-align: left; padding:3px;font-weight: 300;flex:1;">${that.eventNum[enterpriseName]}</td>
<td style="border: 1px solid #41c4ff; text-align: left; padding:3px;font-weight: 300;flex:1;">${that.safeIndex[enterpriseName]}</td>
</tr>
</table>`;
}
return res;
}
},
geo: {
show: true,
map: "china",
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false, //是否允许地图缩放、平移
layoutCenter: ["46%", "50%"], //地图位置
layoutSize: "120%", //125%
itemStyle: {
normal: {
color: "#3156D7", //地图颜色 原"#052951"
// areaColor:'#02304D',
areaColor: "#3156D7",
borderColor: "#41FBFF", //省市边界线
borderWidth: 1
// shadowColor: "rgba(0,0,0,1)",
// shadowBlur: 20,
// shadowOffsetX: -10,
// shadowOffsetY: 10
},
emphasis: {
color: "#052A4D" //悬浮背景
}
}
},
series: series
};
this.echart1.setOption(option);
}
效果图: