diff --git a/src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue b/src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue index 9b5c15d7..477719e7 100644 --- a/src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue +++ b/src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue @@ -51,7 +51,7 @@ export default { }, mounted() { console.log('🚀 ~ mounted ~ this.state:', this.state) - console.log('state-->', this.pieValues) + console.log('statexxxxxxxxxxxxxxx-->', this.pieValues) setTimeout(() => { this.query = this.state this.initPieChart() @@ -73,27 +73,55 @@ export default { // console.log('🚀 ~ initPieChart ~ chartDom:', chartDom) if (!chartDom) return const myChart = echarts.init(chartDom) - + // 提取颜色数组为独立变量 + const pieColors = ['#69A6C9', '#7DDBBA', '#ffc300'] const option = { - tooltip: { - trigger: 'item', - }, - series: [ - { - name: '装备年限', - type: 'pie', - radius: '39%', - avoidLabelOverlap: false, - label: { - show: true, - formatter: '{b}\n{d}%', - color: '#A3D6F8', - }, - labelLine: { - show: true, - length: 8, // 第一段线 - length2: 5, // 第二段线 - }, + color: pieColors, // 保持原颜色 + tooltip: { + trigger: 'item', + }, + // 隐藏图例(图中无图例) + // legend: { + // show: false + // }, + series: [ + { + name: '装备年限', + type: 'pie', + radius: '39%', + avoidLabelOverlap: false, + // 调整标签:拆分成“百分比(大字体+彩色)”和“名称(小字体+白色)” + label: { + show: true, + // 自定义标签格式:百分比单独放大+彩色,名称换行后白色 + formatter: function(params) { + // 自定义标签格式:百分比 + 换行 + 名称 + return `{percent|${params.percent.toFixed(0)}%}\n{name|${params.name}}`; + }, + // 富文本样式:控制百分比和名称的字体/颜色 + rich: { + percent: { + fontSize: 16, // 百分比字体放大 + fontWeight: 'bold', + color: 'inherit' + }, + name: { + fontSize: 12, // 名称字体缩小 + color: '#fff', // 名称统一白色 + marginTop: 2 + } + }, + // 标签位置:调整到饼图外部(和示例一致) + position: 'outside' + }, + labelLine: { + show: true, + length: 8, + length2: 5, + lineStyle: { + color: '#fff' // 标签线改为白色(适配深色背景) + } + }, data: this.pieData, },