222 lines
4.7 KiB
Vue
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>
|