update 3d 的缺陷分类分析
This commit is contained in:
parent
9e7747dde9
commit
06ea5be776
@ -94,11 +94,11 @@ const tableProps = [
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
|
||||
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
|
||||
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
|
||||
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
|
||||
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
|
||||
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
|
||||
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
|
||||
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
|
||||
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
|
||||
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
|
||||
]
|
||||
|
||||
export default {
|
||||
|
||||
@ -87,44 +87,47 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
const demoData = [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 100, name: 'B' },
|
||||
{ value: 100, name: 'C' },
|
||||
{ value: 100, name: 'D' },
|
||||
{ value: 100, name: 'E' }
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
// default configs
|
||||
configs: {
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
left: '64%',
|
||||
left: '62%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
fontSize: 12,
|
||||
fontWeight: 'lighter'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
bottom: '0%',
|
||||
left: '-5%',
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = [
|
||||
{ name: 'A', value: 100 },
|
||||
{ name: 'B', value: 200 },
|
||||
{ name: 'C', value: 300 },
|
||||
{ name: 'D', value: 400 },
|
||||
{ name: 'E', value: 500 }
|
||||
]
|
||||
const testData = demoData
|
||||
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
@ -142,7 +145,6 @@ export default {
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
// align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
@ -206,8 +208,8 @@ export default {
|
||||
{
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['65%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
center: ['63%', '50%'],
|
||||
radius: ['55%', '80%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
formatter: params => {
|
||||
@ -229,7 +231,7 @@ export default {
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
@ -237,43 +239,85 @@ export default {
|
||||
colorGradient.y2 = 1
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 200, name: 'B' },
|
||||
{ value: 300, name: 'C' },
|
||||
{ value: 400, name: 'D' },
|
||||
{ value: 500, name: 'E' }
|
||||
]
|
||||
data: demoData
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
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['fault-pie-chart'])
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
|
||||
this.applyChartOption()
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {}
|
||||
methods: {
|
||||
calcFontsize(baseSize) {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return beilv * baseSize
|
||||
},
|
||||
applyChartOption() {
|
||||
const fs5 = this.calcFontsize(5 /**px*/)
|
||||
const fs8 = this.calcFontsize(8 /**px*/)
|
||||
const fs10 = this.calcFontsize(10 /**px*/)
|
||||
const fs12 = this.calcFontsize(12 /**px*/)
|
||||
const fs16 = this.calcFontsize(16 /**px*/)
|
||||
|
||||
this.configs.title.textStyle.fontSize = fs16
|
||||
this.configs.title.subtextStyle.fontSize = fs12
|
||||
|
||||
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 = fs16
|
||||
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.series[0].label.rich.first.fontSize = fs8
|
||||
this.configs.series[0].label.rich.second.fontSize = fs8
|
||||
this.configs.series[0].label.rich.third.fontSize = fs8
|
||||
this.configs.series[0].label.rich.fourth.fontSize = fs8
|
||||
this.configs.series[0].label.rich.fifth.fontSize = fs8
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user