148 lines
3.4 KiB
Vue
148 lines
3.4 KiB
Vue
<template>
|
|
<div class="chart-card">
|
|
<div class="chart-card-header">
|
|
<span class="chart-card-title">产品销售额排名分析</span>
|
|
</div>
|
|
<div class="rank-chart-container" ref="chartRef"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
|
|
const chartRef = ref(null)
|
|
let chartInstance = null
|
|
|
|
const initRankChart = () => {
|
|
const el = chartRef.value
|
|
if (!el) return
|
|
|
|
chartInstance = echarts.init(el)
|
|
|
|
const salesData = [980, 1250, 1420, 1580, 1650, 1820, 2150, 2580]
|
|
const totalSales = salesData.reduce((sum, val) => sum + val, 0)
|
|
const percentData = salesData.map(val => ((val / totalSales) * 100).toFixed(1))
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
|
borderColor: '#409EFF',
|
|
borderWidth: 1,
|
|
textStyle: { color: '#0a3b70' },
|
|
padding: [8, 12],
|
|
borderRadius: 6,
|
|
formatter: function(params) {
|
|
const index = params[0].dataIndex
|
|
return `产品：${params[0].name}<br/>销售额：${params[0].value}万元<br/>占比：${percentData[index]}%`
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '10%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
fontSize: 11,
|
|
color: '#b4c7e7'
|
|
},
|
|
axisLine: { lineStyle: { color: '#1a508b' } },
|
|
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['产品H', '产品G', '产品F', '产品E', '产品D', '产品C', '产品B', '产品A'],
|
|
axisLabel: {
|
|
fontSize: 11,
|
|
color: '#b4c7e7'
|
|
},
|
|
axisLine: { lineStyle: { color: '#1a508b' } },
|
|
inverse: false // 核心修改：关闭反转，第一名显示在底部
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '销售额',
|
|
type: 'bar',
|
|
barWidth: '15%',
|
|
data: salesData,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: '#409EFF' },
|
|
{ offset: 1, color: '#1890FF' }
|
|
])
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
fontSize: 10,
|
|
color: '#e0e6ff',
|
|
formatter: function(params) {
|
|
const index = params.dataIndex
|
|
return `${params.value}万元 (${percentData[index]}%)`
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
chartInstance.setOption(option)
|
|
window.addEventListener('resize', () => chartInstance.resize())
|
|
}
|
|
|
|
onMounted(() => initRankChart())
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-card-header {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 16px;
|
|
background-color: rgba(26, 80, 139, 0.5);
|
|
border-bottom: 1px solid #1a508b;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart-card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #409EFF;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.rank-chart-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: calc(100% - 40px);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:deep(.echarts-tooltip) {
|
|
background-color: rgba(145, 200, 255, 0.9) !important;
|
|
border-color: #409EFF !important;
|
|
color: #0a3b70 !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
</style> |