yudao-dev/src/views/OperationalOverview/components/PieChart.vue
‘937886381’ 41e0d34551 修改bug
2024-01-25 17:56:37 +08:00

222 lines
4.7 KiB
Vue

<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2024-01-25 17:41:44
* @Description:
-->
<template>
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'DefaultPieChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
showCenterTitle: {
type: Boolean,
default: false
},
showLegend: {
type: Boolean,
default: false
},
legendConfig: {
type: Object,
default: function() {
return {}
}
},
seriesConfig: {
type: Object,
default: function() {
return {}
}
},
seriesData: {
type: Array,
default: () => []
},
barColor: {
type: Array,
default: () => [
'#5fe1d2',
'#ffb2b0',
'#8e90ff',
'#f058aa',
'#8652da',
'#87fb84',
'#61b9ff',
'#fdf6a6',
'#ffc465',
'#98d9ff'
]
}
},
data() {
const lData = this.seriesData
return {
chart: null,
defaultConfig: {
// 默认的legend配置
legend: {
orient: 'vertical',
left: '75%',
bottom: 0,
itemHeight: 10,
itemWidth: 10,
formatter: function(name) {
let pieLegendVale = {}
lData.filter((item, index) => {
if (item.name === name) {
pieLegendVale = item
}
})
const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
return arr.join(' ')
},
textStyle: {
rich: {
a: {
align: 'center',
fontSize: 10,
color: '#f988bf',
lineHeight: 16
},
b: {
// verticalAlign: 'top',
align: 'center',
fontSize: 10,
color: '#dddfe1'
}
}
}
},
// 默认的series配置
series: {
center: ['35%', '50%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
}
}
}
}
},
computed: {
computedHeight: function() {
if (/[0-9]+%$/.test(this.height)) {
// 如果是百分比
return this.height
}
return this.height * this.beilv + 'px'
}
},
mounted() {
// this.$nextTick(() => {
// // this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
title: this.showCenterTitle
? {
text: '总共',
subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
top: '32%',
left: '49%',
textAlign: 'center',
itemGap: 5,
textStyle: {
color: '#c0c0c0',
fontSize: 16,
fontWeight: 'lighter',
lineHeight: 15
},
subtextStyle: {
color: '#fff',
fontSize: 24,
lineHeight: 20
}
}
: {},
tooltip: {
trigger: 'item'
},
grid: {
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
containLabel: true
},
legend: {
// 默认配置
...this.defaultConfig.legend,
// 外部传入配置
...this.legendConfig
},
color: this.barColor,
series: [
{
name: 'default name',
type: 'pie',
// 默认series配置
...this.defaultConfig.series,
// 外部传入配置
...this.seriesConfig,
data: this.seriesData
}
]
})
}
}
}
</script>
<style scoped>
/* .chart >>> div:first-child{
background-color: red;
height: 100% !important;
} */
</style>