大屏页面初始化

screen-vue/src/views/desktop/components/ChartNote.vue

@@ -29,12 +29,11 @@ import * as echarts from 'echarts'
 import { getItemInfoList } from '@/api/bizApi'
 
 const tabDict = [
-  { key: 'NOTE_YEAR_Y001', label: '类型' },  // 默认选项
+  { key: 'NOTE_YEAR_Y001', label: '类型' },
   { key: 'NOTE_YEAR_Y002', label: '月份' },
 ]
 
-// 响应式数据
-const activeTabKey = ref(tabDict[0].key)  // 默认选中第一个
+const activeTabKey = ref(tabDict[0].key)
 const indexCode = ref(activeTabKey.value)
 const tableData = ref([])
 const chartRef = ref(null)
@@ -49,7 +48,6 @@ let seriesStatus = {
 
 const currentYear = new Date().getFullYear().toString();
 
-// 获取数据方法
 async function getDataList() {
   try {
     const reqParams = {
@@ -73,7 +71,6 @@ function switchTab(tabKey) {
   getDataList()
 }
 
-// 计算总数
 function calculateTotal() {
   const xAxisData = tableData.value.map(item => item.xaxis || '')
   const index01Data = tableData.value.map(item => Math.round(Number(item.index01) || 0))
@@ -89,7 +86,6 @@ function calculateTotal() {
   })
 }
 
-// 渲染图表
 function renderChart() {
   if (!chartRef.value || tableData.value.length === 0) return
 
@@ -106,6 +102,11 @@ function renderChart() {
   const totalData = calculateTotal()
 
   const option = {
+    animationDuration: 1000,
+    animationEasing: 'cubicOut',
+    animationDelay: function(idx) {
+      return idx * 50;
+    },
     legend: {
       show: true,
       orient: 'horizontal',
@@ -208,6 +209,9 @@ function renderChart() {
           fontSize: 10,
           color: '#fff',
           fontWeight: 'bold'
+        },
+        animationDelay: function(idx) {
+          return idx * 30;
         }
       },
       {
@@ -224,6 +228,9 @@ function renderChart() {
           fontSize: 10,
           color: '#fff',
           fontWeight: 'bold'
+        },
+        animationDelay: function(idx) {
+          return idx * 30 + 100;
         }
       },
       {
@@ -240,6 +247,9 @@ function renderChart() {
           fontSize: 10,
           color: '#fff',
           fontWeight: 'bold'
+        },
+        animationDelay: function(idx) {
+          return idx * 30 + 200;
         }
       },
       {
@@ -258,6 +268,9 @@ function renderChart() {
           fontSize: 11,
           color: '#303133',
           fontWeight: 'bold'
+        },
+        animationDelay: function(idx) {
+          return idx * 30 + 300;
         }
       }
     ]