<template>
<div class="ship-path elFonSize" style="position: relative">
<span v-show="id == 'shipPath'" class="ylabel ylabel-left">
<span style="transform: scale(0.8);">系统内</span>
</span>
<span v-show="id == 'shipPath1'" class="ylabel ylabel-right">
<span style="transform: scale(0.8);">系统外</span>
</span>
<div :id="id" :style="{height:height,width:width}" style="padding-top: 20px;"></div>
<map-popup :popupShow="dialogVisible" :data="tableData" @getVisable="getVisable"></map-popup>
</div>
</template>
<script>
import echarts from 'echarts'
import {echartfontSize} from "@/utils"
import MapPopup from '../../../components/MapPopup.vue';
export default {
name: "shipPath",
components:{MapPopup},
// 验证类型
props: {
id: {
type: String
},
chartData: {
type: Array,
default: () => ([]),
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '200px'
},
color: {
type: String,
default: ''
}
},
data() {
return {
tableData: [],
dialogVisible: false,
chart: null,
chartDatas: [],
option: {
grid: {
containLabel: true,
top: 'middle',
left: 20,
right: 20,
height: '50%',
},
calculable: true,
radar: [
{
center: ["50%", "40%"], // 图的位置
indicator: [],
name: {
textStyle: {
color: '#fff',
fontSize: echartfontSize(0.12)
},
},
axisLine: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
radius: '40%',
triggerEvent: true
}
],
series: [
{
type: "radar",
symbol: "none",
lineStyle: {color: 'rgba(0,213,255)', opacity: 1, width: 2}, //线的颜色
data: [
{
value: [100, 50, 0, 0, 0, 0, 0, 50],
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
color: '#00D5FF',
opacity: 1
}
},
list: []
},
{
value: [50, 100, 50, 0, 0, 0, 0, 0],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [0, 50, 100, 50, 0, 0, 0, 0],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [0, 0, 50, 100, 50, 0, 0, 0],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [0, 0, 0, 50, 100, 50, 0, 0],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [0, 0, 0, 0, 50, 100, 50, 0],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [0, 0, 0, 0, 0, 50, 100, 50],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
},
{
value: [50, 0, 0, 0, 0, 0, 50, 100],
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0)'
}
},
list: []
}
]
}
]
}
}
},
watch: {
height: {
handler: function (newVal) {
let self = this;
setTimeout(function () {
if (self.chart) {
self.chart.resize()
}
}, 800);
}
},
chartData(newVal) {
if (newVal.length > 0) {
this.initEchart();
}
}
},
methods: {
initEchart() {
this.chart = echarts.init(document.getElementById(this.id));
if (this.option && typeof this.option === "object") {
if (this.option.radar.length > 0) this.option.radar[0].indicator = this.chartData
for (let i = 0; i < this.chartData.length; i++) {
let count = Number(this.chartData[i].name)
this.option.series[0].data[i].list = this.chartData[i].list
console.log(this.color, 'pppp')
if (count == 0) {
this.option.series[0].data[i].areaStyle = {
opacity: 0,
color: this.color,
}
} else if (count > 0 && count < 50) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.1,
color: this.color,
}
} else if (count >= 50 && count < 100) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.2,
color: this.color,
}
} else if (count >= 100 && count < 150) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.3,
color: this.color,
}
} else if (count >= 150 && count < 200) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.4,
color: this.color,
}
} else if (count >= 200 && count < 250) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.5,
color: this.color,
}
} else if (count >= 250 && count < 300) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.6,
color: this.color,
}
} else if (count >= 300 && count < 400) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.7,
color: this.color,
}
} else if (count >= 400) {
this.option.series[0].data[i].areaStyle = {
opacity: 0.8,
color: this.color,
}
}
}
this.option.series[0].lineStyle.color = this.color
this.chart.setOption(this.option, true);
this.chart.off('click');
this.chart.on('click',(params)=>{
// this.dialogVisible = true
if (params.componentType == 'radar') {
var list = this.chartData.filter(item=>item.name == params.name)
this.tableData = list[0].list
} else {
this.tableData = params.data.list
}
if (this.tableData.length >0) this.dialogVisible = true
else this.$message.error("暂无数据")
})
}
},
resize() {
window.addEventListener('resize', this.__resizeHandler)
},
getVisable(val){
this.dialogVisible = val
}
},
mounted() {
if (this.chartData && this.chartData.length > 0) this.initEchart();
this.resize();
},
beforeDestroy() {
if (!this.chart) {
return
}
window.removeEventListener('resize', this.chart);
this.chart.dispose();
this.chart = null
},
}
</script>
<style scoped lang="scss">
$url: '~images/module/shipPortrayyal/';
.ylabel {
position: absolute;
background: url("#{$url}/img-switch.png") no-repeat center;
background-size: 100% 100%;
width: 35%;
height: 12%;
bottom: 2%;
display: flex;
align-items: center;
justify-content: center ;
text-align: center;
&-left {
left: 50%;
transform: translateX(-50%);
}
&-right {
right: 50%;
transform: translateX(50%);
background: url("#{$url}/img-path-out.png") no-repeat center;
background-size: 100% 100%;
}
}
</style>
