diff --git a/src/views/home/components/provincial/Bottom1-1.vue b/src/views/home/components/provincial/Bottom1-1.vue index 7532738d..b223928a 100644 --- a/src/views/home/components/provincial/Bottom1-1.vue +++ b/src/views/home/components/provincial/Bottom1-1.vue @@ -55,7 +55,50 @@ export default { const myChart = echarts.init(chartDom) const xData = this.chartData.map((item) => item.name) - const yData = this.chartData.map((item) => item.value) + const BAR_COLOR_MAP = [ + { + bottom: '#51ABF7', + top: '#78C5FF', + }, + { + bottom: '#5EDDCA', + top: '#32E1C6', + }, + { + bottom: '#FFB644', + top: '#FFC468', + }, + { + bottom: '#FFAB6F', + top: '#F8AC86', + }, + ] + const seriesData = this.chartData.map((item, index) => { + const color = BAR_COLOR_MAP[index] || BAR_COLOR_MAP[0] + + return { + value: item.value, + + // ✅ 柱体颜色(静态) + itemStyle: { + borderRadius: [50, 50, 0, 0], + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: color.bottom }, + { offset: 1, color: color.top }, + ]), + }, + + // ✅ label 颜色(静态) + label: { + show: true, + position: 'top', + fontSize: 16, + fontWeight: 'bold', + color: color.top, + formatter: `${item.value}/${item.proportion}%`, + }, + } + }) const option = { title: [ @@ -137,37 +180,10 @@ export default { series: [ { type: 'bar', - barWidth: 28, // 👉 宽度 = 28px + barWidth: 20, // 👉 宽度 = 28px + barMinHeight: 6, z: 10, - - itemStyle: { - borderRadius: [5, 5, 0, 0], // 👉 圆角 5px 5px 0 0 - color: { - type: 'linear', - x: 0, - y: 1, - x2: 0, - y2: 0, // 👉 0deg = 从下到上 - colorStops: [ - { offset: 0, color: '#31B5C4' }, // 底部 - { offset: 1, color: '#5DDAE2' }, // 顶部 - ], - }, - }, - - label: { - show: true, - position: 'top', - fontSize: 16, - fontWeight: 'bold', - color: '#333', - formatter: (params) => { - const proportion = this.chartData[params.dataIndex].proportion - return `${params.value}/${proportion}%` - }, - }, - - data: yData, + data: seriesData, }, ], } diff --git a/src/views/home/components/provincial/Center1.vue b/src/views/home/components/provincial/Center1.vue index b766c7d4..d78c028d 100644 --- a/src/views/home/components/provincial/Center1.vue +++ b/src/views/home/components/provincial/Center1.vue @@ -146,6 +146,5 @@ export default { .table-sty ::v-deep .el-table__cell { padding: 7px 0; - border: 0.5px solid #333; }