181 lines
3.3 KiB
Vue
181 lines
3.3 KiB
Vue
<!--
|
|
filename: ISRAChart.vue
|
|
author: liubin
|
|
date: 2023-12-12 09:05:25
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="isra-chart"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import resize from './../mixins/resize'
|
|
|
|
export default {
|
|
name: 'ISRAChart',
|
|
mixins: [resize],
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
|
chartData: [],
|
|
option: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
bottom: '3%',
|
|
left: 'center',
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: 0,
|
|
subtext: '总数',
|
|
top: '43%',
|
|
left: '49%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 32,
|
|
lineHeight: 16,
|
|
color: '#fff',
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff00',
|
|
},
|
|
},
|
|
series: []
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initChart();
|
|
},
|
|
activated() {
|
|
},
|
|
computed: {
|
|
israChartMsg() {
|
|
return this.$store.state.websocket.israKiln
|
|
}
|
|
},
|
|
watch: {
|
|
israChartMsg: {
|
|
handler(newVal, oldVal) {
|
|
console.log(newVal)
|
|
this.chartData = newVal
|
|
console.log('newVal============')
|
|
this.updateChart()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(this.$el);
|
|
this.chart.setOption(this.option);
|
|
},
|
|
updateChart() {
|
|
console.log('update')
|
|
let num = 0
|
|
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
|
num+=i.num
|
|
})
|
|
this.chart.setOption({
|
|
title:{
|
|
text: num,
|
|
subtext: '总数',
|
|
top: '43%',
|
|
left: '49%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 32,
|
|
lineHeight: 16,
|
|
color: '#fff',
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff00',
|
|
},
|
|
},
|
|
series:[{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['45%', '65%'],
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
show: true,
|
|
position: 'outside',
|
|
formatter: ({ dataIndex, percent }) => {
|
|
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
|
return `{${styleName}|${percent}%}`;
|
|
},
|
|
rich: {
|
|
a: {
|
|
color: '#2760ff',
|
|
fontSize: 24,
|
|
borderWidth: 0,
|
|
textBorderWidth: 0,
|
|
},
|
|
b: {
|
|
color: '#518eec',
|
|
fontSize: 24,
|
|
borderWidth: 0,
|
|
textBorderWidth: 0,
|
|
},
|
|
c: {
|
|
color: '#0ee8e4',
|
|
fontSize: 24,
|
|
borderWidth: 0,
|
|
textBorderWidth: 0,
|
|
},
|
|
d: {
|
|
color: '#ddb523',
|
|
fontSize: 24,
|
|
borderWidth: 0,
|
|
textBorderWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
itemStyle: {
|
|
borderRadius: 12
|
|
},
|
|
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
|
name:item.name,
|
|
value: item.num,
|
|
itemStyle:{
|
|
color:{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
global: false,
|
|
colorStops:[
|
|
{offset: 0,color: this.colors[index%4]},
|
|
{offset: 1,color: this.colors[index%4]+'33'}
|
|
]
|
|
}
|
|
}
|
|
}))}]
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.isra-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|