feat: 左侧底部完成;添加清除定时器

src/views/big-data/charts/left-middle.tsx

@@ -44,6 +44,12 @@ option.value = {
         color: '#fff',
         formatter: '+{value}%',
       },
+      data: [
+        {
+          name: '环比变化',
+          detail: { valueAnimation: true, offsetCenter: ['0%', '-20%'] },
+        },
+      ],
     },
   ],
 };
@@ -73,7 +79,9 @@ export const ChartProgress = defineComponent({
 
     onMounted(() => {
       renderEcharts(myChart, chart);
+
       updateChart(myChart, props);
+
       watch(
         () => props.percent,
         () => {
@@ -88,18 +96,9 @@ export const ChartProgress = defineComponent({
 
 /** 更新图标数据 */
 const updateChart = (myChart: Ref<EChartsType | undefined>, props: any) => {
-  myChart.value?.setOption({
+  const series = myChart.value.getOption().series;
-    series: [
+  series[0].data[0].value = props.percent;
-      {
+  series[0].data[0].itemStyle = props.percent >= 20 ? itemStyles[0] : itemStyles[1];
-        data: [
+
-          {
+  myChart.value?.setOption({ series });
-            name: '环比变化',
-            value: props.percent,
-            detail: { valueAnimation: true, offsetCenter: ['0%', '-20%'] },
-            itemStyle: props.percent >= 20 ? itemStyles[0] : itemStyles[1],
-          },
-        ],
-      },
-    ],
-  });
 };

src/views/big-data/charts/leftBottom.tsx

@@ -0,0 +1,78 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+let myChart = null;
+
+const option = {
+  backgroundColor: 'transparent',
+  grid: { top: 40, right: 0, left: 0, bottom: 24 },
+  tooltip: {},
+  legend: {
+    data: [
+      { name: '出园', icon: 'rect', itemStyle: { color: '#32C5FF' } },
+      { name: '入园', icon: 'rect', itemStyle: { color: '#16CEB9' } },
+    ],
+    icon: 'rect',
+    right: 0,
+    top: 0,
+    itemGap: 9,
+    orient: 'horizontal',
+    align: 'left',
+    textStyle: { fontSize: 14, color: '#fff' },
+  },
+  xAxis: {
+    type: 'category',
+    show: true,
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    itemStyle: { color: '#ccc' },
+    splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'dotted' } },
+    splitArea: { show: false },
+  },
+  yAxis: { show: false, type: 'value' },
+  series: [
+    {
+      name: '入园',
+      type: 'line',
+      data: [3, 9, 2, 8, 3, 4, 8, 2, 8, 3, 4, 8],
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 14,
+      itemStyle: { borderColor: '#16CEB9', borderWidth: 6, color: '#142745' },
+      lineStyle: { color: '#16CEB9', width: 6 },
+    },
+    {
+      name: '出园',
+      type: 'line',
+      data: [2, 8, 3, 7, 1, 9, 18, 3, 7, 1, 9, 6],
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 14,
+      itemStyle: { borderColor: '#32C5FF', borderWidth: 6, color: '#142745' },
+      lineStyle: { color: '#32C5FF', width: 6 },
+    },
+  ],
+};
+
+/** 渲染图表 */
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: Array<Array<number>>) => {
+  const series = myChart.getOption().series;
+  series[0].data = option[0];
+  series[1].data = option[1];
+  myChart.setOption({ series });
+};

src/views/big-data/components/big-data-left/components/left-bottom.vue

@@ -1,13 +1,60 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { renderEcharts, updateChart } from '@/views/big-data/charts/leftBottom';
+
+const chart = ref<HTMLDivElement>();
+const timer = ref(null);
+
+const randomData = () => {
+  function random() {
+    return Array(11)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  timer.value = setInterval(() => {
+    const data: Array<Array<number>> = [random(), random()];
+
+    updateChart(data);
+  }, 1000);
+};
+
+onMounted(() => {
+  renderEcharts(chart);
+  randomData();
+});
+
+onUnmounted(() => {
+  clearInterval(timer.value);
+  timer.value = null;
+});
+</script>
 
 <template>
-  <div class="big-data__sidebar-item h-[272px]">
+  <div class="big-data__sidebar-item">
     <div class="flex-x-between">
       <div class="big-data__sidebar-title">
-        <h1>规模效益</h1>
+        <h1>园区规划</h1>
       </div>
     </div>
+    <div ref="chart" class="chart" />
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.big-data__sidebar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 272px;
+}
+
+.chart {
+  width: 100%;
+  height: 200px;
+}
+</style>

src/views/big-data/components/big-data-left/components/left-middle.vue

@@ -1,9 +1,10 @@
 <script lang="tsx" setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 import { formatter } from '@/utils/chart';
 import { ChartProgress } from '@/views/big-data/charts/left-middle';
 
+const timer = ref(null);
 const randomNumber = (range: number = 100) => {
   return parseInt((Math.random() * range).toFixed(0));
 };
@@ -34,14 +35,19 @@ const renderItem = () => {
 };
 
 onMounted(() => {
-  setInterval(() => {
+  timer.value = setInterval(() => {
     list.value = [
       { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
       { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
       { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
       { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
     ];
-  }, 2000);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  clearInterval(timer.value);
+  timer.value = null;
 });
 </script>
 

src/views/smart-park/charts/right-sidebar.ts

@@ -1,12 +1,13 @@
 import 'echarts/lib/component/dataZoom';
 
-import { type Ref, ref } from 'vue';
+import type { Ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
 import { debounceChart } from '@/utils/chart';
 
-const option = ref<any>();
+let myChart = null;
-option.value = {
+
+const option = {
   backgroundColor: 'transparent',
   grid: { right: 10, left: 10, bottom: 20 },
   title: {
@@ -40,9 +41,7 @@ option.value = {
         type: 'solid', // 'solid' ||'dashed'||'dotted'
       },
     },
-    splitArea: {
+    splitArea: { show: false },
-      show: false,
-    },
   },
   yAxis: { show: false, type: 'value' },
   series: [
@@ -96,12 +95,20 @@ option.value = {
 };
 
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
-  const myChart: any = echarts.init(element.value, null, {
+  myChart = echarts.init(element.value, null, {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });
 
   debounceChart(myChart);
 
-  myChart.setOption(option.value);
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: any) => {
+  const series = myChart.getOption().series;
+  series[0].data = option.data1;
+  series[1].data = option.data2;
+  myChart.setOption({ series });
 };

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue

@@ -1,12 +1,36 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-park/charts/right-sidebar';
+import { renderEcharts, updateChart } from '@/views/smart-park/charts/right-sidebar';
 
 const weekDataChart = ref<HTMLDivElement>();
 
+const timer = ref(null);
+
+/** 随机数据 */
+const randomData = () => {
+  function random() {
+    return Array(11)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  timer.value = setInterval(() => {
+    updateChart({ data1: random(), data2: random() });
+  }, 1000);
+};
+
 onMounted(() => {
   renderEcharts(weekDataChart);
+  randomData();
+});
+
+onUnmounted(() => {
+  clearInterval(timer.value);
+  timer.value = null;
 });
 </script>