若依后台数据大屏实战：用ECharts嵌套饼图可视化你的SQL查询结果
若依后台数据大屏实战：用ECharts嵌套饼图可视化你的SQL查询结果
在数据驱动的时代，企业后台管理系统中的业务数据可视化已成为提升决策效率的关键。本文将带你从零开始，在若依分离版系统中实现一个完整的"计划与实际对比"数据大屏，重点讲解如何将数据库查询结果转化为直观的ECharts嵌套饼图。
1. 环境准备与数据查询
在开始可视化之前，我们需要确保开发环境配置正确。对于使用若依分离版的开发者，首先需要确认Vue和ECharts的版本兼容性：
# Vue 2项目推荐版本 npm install echarts@4.9.0 vue-echarts@5.0.0-beta.0 --force -save npm i -D @vue/composition-api # Vue 3项目推荐版本 npm install echarts@5.2.2 vue-echarts@6.0.0 --force -save数据查询是可视化的第一步。假设我们需要从sm_shipment_daily表中获取2024年8月的发货数据：
SELECT DATE_FORMAT(shipment_date, '%Y-%m-%d') AS day, SUM(plan_quantity) AS daily_plan, SUM(actual_quantity) AS daily_actual, MONTH(shipment_date) AS month FROM sm_shipment_daily WHERE DATE_FORMAT(shipment_date,'%Y-%m')='2024-08' GROUP BY day2. 数据格式转换与聚合
从数据库获取的原始数据通常需要经过处理才能适配ECharts的格式要求。我们需要将查询结果转换为嵌套饼图所需的结构：
// 假设后端API返回的数据结构 const rawData = [ { day: '2024-08-01', daily_plan: 1548, daily_actual: 775 }, { day: '2024-08-02', daily_plan: 1620, daily_actual: 810 }, // ...其他日期数据 ] // 转换为ECharts需要的格式 function transformData(rawData) { const monthlyPlan = rawData.reduce((sum, item) => sum + item.daily_plan, 0) const monthlyActual = rawData.reduce((sum, item) => sum + item.daily_actual, 0) return { daily: [ { value: rawData[0].daily_plan, name: '天计划' }, { value: rawData[0].daily_actual, name: '天实际' } ], monthly: [ { value: monthlyPlan, name: '月计划' }, { value: monthlyActual, name: '月实际' } ] } }3. ECharts嵌套饼图深度配置
嵌套饼图（也称为环形图）通过多层饼图叠加实现，核心在于radius参数的配置：
const option = { tooltip: { trigger: 'item', formatter: params => { const { seriesName, name, value, percent } = params return `${seriesName}<br/>${name}: ${value} (${percent}%)` } }, series: [ { name: '当日数据', type: 'pie', radius: ['0%', '40%'], label: { position: 'inner', formatter: '{b}\n{c}', fontSize: 14 }, labelLine: { show: false }, data: transformedData.daily }, { name: '月度累计', type: 'pie', radius: ['55%', '70%'], label: { formatter: '{b}: {c}', borderWidth: 1, borderRadius: 4, textStyle: { color: '#ffffff', fontSize: '1.2em' } }, labelLine: { length: 30 }, data: transformedData.monthly } ] }关键配置解析：
radius: 控制饼图半径范围，内环设置为['0%','40%']，外环设置为['55%','70%']label.position: 内环标签设为'inner'显示在内部，外环默认显示在外部formatter: 自定义标签内容，支持{b}（名称）、{c}（值）、{d}（百分比）等占位符
4. 若依前端组件封装与复用
为了在若依系统中实现图表的复用，我们可以封装一个通用的ECharts组件：
<template> <div class="chart-container"> <v-chart :options="chartOption" :autoresize="true" style="height: 100%; width: 100%" /> </div> </template> <script> import ECharts from 'vue-echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' export default { components: { 'v-chart': ECharts }, props: { apiUrl: String, chartTitle: String }, data() { return { chartOption: { title: { text: this.chartTitle, left: 'center' }, tooltip: { trigger: 'item' }, legend: { bottom: 10, left: 'center' }, series: [] } } }, async mounted() { const response = await this.$http.get(this.apiUrl) this.updateChart(response.data) }, methods: { updateChart(rawData) { const transformedData = this.transformData(rawData) this.chartOption.series = [ { name: '当日数据', type: 'pie', radius: ['0%', '40%'], label: { position: 'inner', formatter: '{b}\n{c}' }, labelLine: { show: false }, data: transformedData.daily }, { name: '月度累计', type: 'pie', radius: ['55%', '70%'], label: { formatter: '{b}: {c}' }, data: transformedData.monthly } ] }, transformData(rawData) { // 转换逻辑同上 } } } </script> <style scoped> .chart-container { height: 400px; width: 100%; } </style>使用封装好的组件：
<template> <div> <pie-chart api-url="/api/shipment-data" chart-title="发货计划与实际对比" /> </div> </template> <script> import PieChart from '@/components/PieChart' export default { components: { PieChart } } </script>5. 性能优化与交互增强
在实际项目中，我们还需要考虑以下优化点：
数据缓存策略：
- 使用localStorage缓存API响应
- 实现数据过期机制（如1小时自动刷新）
async fetchData() { const cacheKey = `chart-data-${this.apiUrl}` const cachedData = localStorage.getItem(cacheKey) if (cachedData) { const { data, timestamp } = JSON.parse(cachedData) if (Date.now() - timestamp < 3600000) { // 1小时缓存 return this.updateChart(data) } } const response = await this.$http.get(this.apiUrl) localStorage.setItem(cacheKey, JSON.stringify({ data: response.data, timestamp: Date.now() })) this.updateChart(response.data) }交互增强功能：
- 添加数据刷新按钮
- 实现图表下载为图片
- 响应式调整图表大小
methods: { refreshChart() { localStorage.removeItem(`chart-data-${this.apiUrl}`) this.fetchData() }, downloadChart() { const chartInstance = this.$refs.chart.getEchartsInstance() const imgUrl = chartInstance.getDataURL({ type: 'png' }) const link = document.createElement('a') link.href = imgUrl link.download = 'chart.png' link.click() }, handleResize() { this.$refs.chart.resize() } }, mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }6. 实际项目中的经验分享
在多个若依项目实践中，我发现以下几点特别值得注意：
版本兼容性问题：不同版本的ECharts对配置项的支持有差异，特别是从4.x升级到5.x时，部分API发生了变化。建议团队统一ECharts版本。
大数据量优化：当数据点超过1000时，需要考虑以下优化手段：
- 使用
large属性开启大数据模式 - 设置
largeThreshold参数 - 考虑数据采样或聚合
- 使用
series: [{ type: 'pie', large: true, largeThreshold: 1000, // ...其他配置 }]- 主题定制：若依系统通常有自己的UI风格，可以通过ECharts主题系统保持一致性：
// 注册主题 import theme from './echarts-theme.json' ECharts.registerTheme('ruoyi', theme) // 使用主题 <v-chart theme="ruoyi" :options="chartOption" />- 移动端适配：针对移动设备需要调整标签大小和交互方式：
// 根据屏幕宽度动态调整 const isMobile = window.innerWidth < 768 this.chartOption.series.forEach(series => { series.label.fontSize = isMobile ? 10 : 14 })