366 lines
10 KiB
Vue
366 lines
10 KiB
Vue
<template>
|
|
<div ref="chartContainer" class="chartContainer" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
|
|
|
export default {
|
|
name: 'RightContentFaultAnalysis',
|
|
mixins: [resize],
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: 'default-fault-analysis-id'
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
let totalRate = 0
|
|
const colors = [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#FB418C00', offset: 0.1 },
|
|
{ color: '#FB418C', offset: 1 } // 红
|
|
],
|
|
global: false
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#DDB11200', offset: 0.1 },
|
|
{ color: '#DDB112', offset: 1 } // 黄
|
|
],
|
|
global: false
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#49FBD600', offset: 0.1 },
|
|
{ color: '#74DC85', offset: 1 } // 浅绿
|
|
],
|
|
global: false
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#1A99FF00', offset: 0.1 },
|
|
{ color: '#1A99FF', offset: 1 } // 兰
|
|
],
|
|
global: false
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0.5,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#A691FF00', offset: 0.1 },
|
|
{ color: '#A691FF', offset: 1 } // 紫 3
|
|
],
|
|
global: false
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0.5,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ color: '#FFFFFF00', offset: 0 },
|
|
{ color: '#49FBD600', offset: 0.1 },
|
|
{ color: '#49FBD6', offset: 1 } // 绿
|
|
],
|
|
global: false
|
|
}
|
|
]
|
|
|
|
return {
|
|
chart: null,
|
|
// default configs
|
|
configs: {
|
|
title: {
|
|
textAlign: 'center',
|
|
left: '69%',
|
|
top: '46%',
|
|
text: '',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: 'normal'
|
|
},
|
|
itemGap: 5,
|
|
subtext: '总数',
|
|
subtextStyle: {
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
fontWeight: 'lighter'
|
|
}
|
|
},
|
|
legend: {
|
|
top: '10%',
|
|
bottom: 0,
|
|
left: 0,
|
|
orient: 'vertical',
|
|
icon: 'none',
|
|
itemGap: 5,
|
|
itemWidth: 10,
|
|
formatter: name => {
|
|
const testData = this.dataList
|
|
|
|
let pieLegendVale = {}
|
|
testData.filter((item, index) => {
|
|
if (item.name === name) {
|
|
pieLegendVale = item
|
|
}
|
|
})
|
|
const color = ['c', 'd', 'h', 'e', 'f', 'g']
|
|
const arr = [
|
|
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
|
|
'{b|' + pieLegendVale.name + '}',
|
|
'{a|' + pieLegendVale.value + '}'
|
|
]
|
|
return arr.join(' ')
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 10,
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
lineHeight: 16,
|
|
width: 48,
|
|
align: 'left'
|
|
},
|
|
b: {
|
|
width: 40,
|
|
align: 'left',
|
|
fontSize: 10,
|
|
color: 'rgba(255, 255, 255)'
|
|
},
|
|
c: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#FB418C'
|
|
},
|
|
d: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#DDB112'
|
|
},
|
|
h: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#74DC85'
|
|
},
|
|
e: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#1A99FF'
|
|
},
|
|
f: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#A691FF'
|
|
},
|
|
g: {
|
|
width: 10,
|
|
borderRadius: 5,
|
|
height: 10,
|
|
backgroundColor: '#49FBD6'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: 'PieForm',
|
|
type: 'pie',
|
|
center: ['70%', '56%'],
|
|
radius: ['45%', '65%'],
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
formatter: params => {
|
|
const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
|
|
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
|
|
},
|
|
rich: {
|
|
first: { color: '#FB418C', fontSize: 8 },
|
|
second: { color: '#DDB112', fontSize: 8 },
|
|
third: { color: '#1A99FF', fontSize: 8 },
|
|
fourth: { color: '#A691FF', fontSize: 8 },
|
|
fifth: { color: '#49FBD6', fontSize: 8 },
|
|
sixth: { color: '#74DC85', fontSize: 8 }
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 5,
|
|
length2: 5
|
|
},
|
|
itemStyle: {
|
|
color: params => {
|
|
/** 计算渐变方向的过程，只靠 dataIndex 不太行 */
|
|
const { dataIndex, percent } = params
|
|
const colorGradient = colors[dataIndex]
|
|
if (totalRate + percent < 25) {
|
|
/** 也许这里需要完善，但目前工作良好 */
|
|
;(() => {})()
|
|
} else if (totalRate + percent < 50) {
|
|
colorGradient.x = 0
|
|
colorGradient.y = 0
|
|
colorGradient.x2 = 1
|
|
colorGradient.y2 = 1
|
|
} else if (totalRate + percent >= 50 && dataIndex == 1) {
|
|
colorGradient.x = 1
|
|
colorGradient.y = 1
|
|
colorGradient.x2 = 0
|
|
colorGradient.y2 = 0
|
|
} else if (totalRate + percent < 100) {
|
|
/** 也许这里需要完善，但目前工作良好 */
|
|
;(() => {})()
|
|
}
|
|
|
|
totalRate += percent
|
|
return colorGradient
|
|
}
|
|
},
|
|
data: this.dataList
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
dataList: function(val) {
|
|
if (val && Array.isArray(val) && val.length) {
|
|
this.applyChartOption(val)
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
if (this.chart) {
|
|
this.chart.resize()
|
|
this.$nextTick(() => {
|
|
// 重新绘制文本大小
|
|
this.applyChartOption()
|
|
})
|
|
}
|
|
})
|
|
|
|
this.$nextTick(() => {
|
|
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
|
|
this.applyChartOption()
|
|
this.chart.resize()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
calcFontsize(baseSize) {
|
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
|
return beilv * baseSize
|
|
},
|
|
|
|
applyChartOption(datalist) {
|
|
const fs5 = this.calcFontsize(5 /** px*/)
|
|
const fs10 = this.calcFontsize(10 /** px*/)
|
|
const fs14 = this.calcFontsize(14 /** px*/)
|
|
const fs18 = this.calcFontsize(18 /** px*/)
|
|
const legendTopRate = this.calcFontsize(28 /** % */)
|
|
|
|
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
|
|
this.configs.title.textStyle.fontSize = fs18
|
|
this.configs.title.subtextStyle.fontSize = fs14
|
|
|
|
this.configs.legend.top = legendTopRate + '%'
|
|
this.configs.legend.left = 0 + '%'
|
|
this.configs.legend.itemGap = fs5
|
|
this.configs.legend.itemWidth = fs10
|
|
|
|
this.configs.legend.textStyle.rich.a.fontSize = fs10
|
|
this.configs.legend.textStyle.rich.a.lineHeight = fs10
|
|
this.configs.legend.textStyle.rich.b.fontSize = fs10
|
|
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
|
this.configs.legend.textStyle.rich.c.width = fs10
|
|
this.configs.legend.textStyle.rich.c.height = fs10
|
|
this.configs.legend.textStyle.rich.c.borderRadius = fs5
|
|
this.configs.legend.textStyle.rich.d.width = fs10
|
|
this.configs.legend.textStyle.rich.d.height = fs10
|
|
this.configs.legend.textStyle.rich.d.borderRadius = fs5
|
|
this.configs.legend.textStyle.rich.e.width = fs10
|
|
this.configs.legend.textStyle.rich.e.height = fs10
|
|
this.configs.legend.textStyle.rich.e.borderRadius = fs5
|
|
this.configs.legend.textStyle.rich.f.width = fs10
|
|
this.configs.legend.textStyle.rich.f.height = fs10
|
|
this.configs.legend.textStyle.rich.f.borderRadius = fs5
|
|
this.configs.legend.textStyle.rich.g.width = fs10
|
|
this.configs.legend.textStyle.rich.g.height = fs10
|
|
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
|
this.configs.legend.textStyle.rich.h.width = fs10
|
|
this.configs.legend.textStyle.rich.h.height = fs10
|
|
this.configs.legend.textStyle.rich.h.borderRadius = fs5
|
|
|
|
this.configs.series[0].label.rich.first.fontSize = fs10
|
|
this.configs.series[0].label.rich.second.fontSize = fs10
|
|
this.configs.series[0].label.rich.third.fontSize = fs10
|
|
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
|
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
|
this.configs.series[0].label.rich.sixth.fontSize = fs10
|
|
if (datalist) this.configs.series[0].data = datalist
|
|
this.chart.setOption(this.configs)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chartContainer {
|
|
/* height: calc(100% - (36px * var(--beilv))); */
|
|
/* position: relative; */
|
|
/* position: absolute;
|
|
top: 0;
|
|
left: 0; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.chartContainer > div {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|