258 lines
9.1 KiB
Vue
258 lines
9.1 KiB
Vue
<template>
|
|
<div :id="echartsRef" ref="echartsPie"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'echartsPie', //折线图组件
|
|
props: {
|
|
intersectionName: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
chatShowType: {
|
|
type: String
|
|
},
|
|
echartsRef: {
|
|
type: String
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
timeMode: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
};
|
|
},
|
|
created() {},
|
|
|
|
methods: {
|
|
renameField(obj, oldFieldName, newFieldName) {
|
|
if (Array.isArray(obj)) {
|
|
obj.forEach((item) => {
|
|
this.renameField(item, oldFieldName, newFieldName);
|
|
});
|
|
} else if (typeof obj === 'object') {
|
|
for (let key in obj) {
|
|
if (typeof obj[key] === 'object') {
|
|
this.renameField(obj[key], oldFieldName, newFieldName);
|
|
} else if (key === oldFieldName) {
|
|
obj[newFieldName] = obj[key];
|
|
delete obj[key];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//初始化页面
|
|
initEcharts() {
|
|
let seriesData = null;
|
|
let myChart = this.chart;
|
|
if (this.timeMode == '实时触发') {
|
|
seriesData = null;
|
|
if (this.dataList.length > 0 && this.dataList[0].type_data) {
|
|
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
|
|
seriesData = this.dataList[0].type_data;
|
|
}
|
|
} else if (this.timeMode == '固定时刻') {
|
|
seriesData = null;
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
// this.renameField(this.dataList[0].type_data,'quantity','value')
|
|
// seriesData = this.dataList[0].type_data
|
|
// }
|
|
if (this.dataList.length > 0) {
|
|
if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
|
|
this.renameField(this.dataList[0].type_data, null, null);
|
|
seriesData = this.dataList[0].type_data;
|
|
} else {
|
|
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
|
|
seriesData = this.dataList[0].type_data;
|
|
}
|
|
}
|
|
} else if (this.timeMode == '固定间隔') {
|
|
seriesData = null;
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
// this.renameField(this.dataList[0].type_data, "quantity", "value");
|
|
// seriesData = this.dataList[0].type_data;
|
|
// }
|
|
if (this.dataList.length > 0) {
|
|
if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
|
|
this.renameField(this.dataList[0].type_data, null, null);
|
|
seriesData = this.dataList[0].type_data;
|
|
} else {
|
|
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
|
|
seriesData = this.dataList[0].type_data;
|
|
}
|
|
}
|
|
}
|
|
|
|
var color = [
|
|
'#0CD2E6',
|
|
'#3751E6',
|
|
'#FFC722',
|
|
'#00FF80',
|
|
'#FFEA00',
|
|
'#FF7300',
|
|
'#9500B3',
|
|
'#3377FF',
|
|
'#5087EC',
|
|
'#68BBC4',
|
|
'#58A55C',
|
|
'#F2BD42',
|
|
'#EE752F',
|
|
'#D95040',
|
|
'#14CAFB'
|
|
];
|
|
let option = {
|
|
// title: {
|
|
// show: true,
|
|
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
|
|
// textStyle: {
|
|
// lineHeight: '30'
|
|
// }
|
|
// },
|
|
color: color,
|
|
animation: false,
|
|
legend: {
|
|
top: 20,
|
|
right: 'center',
|
|
textStyle: {},
|
|
type: 'scroll',
|
|
width: '80%'
|
|
// data: [
|
|
// {
|
|
// name: '流量_1-zone2-饼状图-实时触发',
|
|
// icon: 'circle'
|
|
// }
|
|
// ]
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
|
borderWidth: 1,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
// label: {
|
|
// show: true,
|
|
// },
|
|
},
|
|
|
|
textStyle: {
|
|
color: 'rgba(212, 232, 254, 1)'
|
|
// fontSize: fontChart(0.24),
|
|
},
|
|
extraCssText: 'z-index:2'
|
|
},
|
|
series: [
|
|
{
|
|
name: '流量_1-zone2-饼状图-实时触发',
|
|
type: 'pie',
|
|
center: ['50%', '55%'],
|
|
radius: '70%',
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
length: 0,
|
|
length2: 0
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{value|{c}}',
|
|
rich: {
|
|
value: {
|
|
fontSize: 20,
|
|
color: '#ffffff'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: seriesData
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
this.$nextTick(() => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
const $dom = document.getElementById(this.echartsRef);
|
|
$dom.style.width = '440px';
|
|
$dom.style.height = '260px';
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
},
|
|
watch: {
|
|
intersectionName: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
},
|
|
chatShowType: {
|
|
handler: function (oldValues, newValues) {}
|
|
},
|
|
echartsRef: {
|
|
handler: function (oldValues, newValues) {
|
|
console.log('old', oldValues);
|
|
console.log('newV', newValues);
|
|
let that = this;
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
}
|
|
},
|
|
dataList: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
#echartsPie {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|