refactor: 多轴图表修改,未完

src/components/statistical/stastistical-chart.vue

@@ -6,8 +6,9 @@
 </template>
 
 <script setup>
-import { defineExpose, defineProps, onMounted, ref } from 'vue';
+import { computed, defineExpose, defineProps, onMounted, ref, watchEffect } from 'vue';
-import { generateChartOption } from 'utils/statistical';
+import { useStore } from 'vuex';
+import { generateChartOption, generateDefaultYAxis, generateYAxis } from 'utils/statistical';
 import * as echarts from 'echarts/core';
 import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import { LineChart } from 'echarts/charts';
@@ -25,30 +26,41 @@ echarts.use([
   DataZoomComponent,
 ]);
 
+const store = useStore();
 const props = defineProps({ searchHeight: Number });
-
+const realtimeData = computed(() => store.state.statistics.realtimeData);
-const show = ref(false);
+const isMounted = ref(false);
 const noData = ref(true);
 let myChart = null;
 
 // 设置图表
 onMounted(() => {
-  show.value = true;
+  isMounted.value = true;
-  initChart();
+});
+
+watchEffect(() => {
+  if (!realtimeData.value) return;
+  const { data } = realtimeData.value;
+  if (!data || !data.length || !isMounted.value) return;
+  initChart(data);
 });
 
 // 初始化chart
-function initChart() {
+function initChart(data) {
   const chartDom = document.getElementById('realtimeContainer');
   const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
-  console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight);
   chartDom.style.height = `${canvasHeight}px`;
   myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
+  render(data, generateDefaultYAxis());
+
+  myChart.on('legendselectchanged', event => {
+    render(data, generateYAxis(event.selected));
+  });
 }
 
-function render(data) {
+function render(data, yAxis) {
-  myChart && myChart.clear();
+  // myChart && myChart.clear();
   if (!data || !data.length) {
     noData.value = true;
     return;
@@ -58,7 +70,7 @@ function render(data) {
   if (!myChart) {
     initChart();
   }
-  const option = generateChartOption(data);
+  const option = generateChartOption(data, yAxis);
   option && myChart.setOption(option);
 }
 

src/utils/statistical.js

@@ -43,13 +43,136 @@ function generateParams(data) {
   return result;
 }
 
+const yAxisData = [
+  {
+    type: 'value',
+    name: 'SO2(ppb)',
+    position: 'left',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[0] },
+    },
+    axisLabel: { formatter: '{value}ppb' },
+  },
+  {
+    type: 'value',
+    name: '盐分阻抗(Ω)',
+    // min: 0,
+    // max: 250,
+    position: 'left',
+    offset: 70,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[1] },
+    },
+    axisLabel: { formatter: '{value}Ω' },
+  },
+  {
+    type: 'value',
+    name: '环温(℃)',
+    // min: 0,
+    // max: 25,
+    position: 'left',
+    offset: 135,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[2] },
+    },
+    axisLabel: { formatter: '{value}°C' },
+  },
+  {
+    type: 'value',
+    name: '环湿(RH%)',
+    // min: 0,
+    // max: 25,
+    position: 'left',
+    offset: 200,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[3] },
+    },
+    axisLabel: { formatter: '{value}RH%' },
+  },
+  {
+    type: 'value',
+    name: '锌腐蚀电流(nA)',
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[4] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '铜腐蚀电流(nA)',
+    offset: 100,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[5] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '铝腐蚀电流(nA)',
+    offset: 200,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[6] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '钢腐蚀电流(nA)',
+    offset: 300,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[7] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+];
+
+/**
+ * 生产y轴内容
+ * @param {Object} selectedLegend
+ * @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
+ */
+export function generateYAxis(selectedLegend) {
+  console.log(selectedLegend);
+  return yAxisData.filter(item => selectedLegend[item.name]);
+}
+
+/**
+ * 生成初始状态的y轴
+ * @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
+ */
+export function generateDefaultYAxis() {
+  const selectedLegend = [
+    {
+      '钢腐蚀电流(nA)': true,
+      '铜腐蚀电流(nA)': true,
+      '铝腐蚀电流(nA)': true,
+      '锌腐蚀电流(nA)': true,
+    },
+  ];
+  return yAxisData.filter(item => selectedLegend.find(selected => selected[item.name]));
+}
+
 /**
  * 生成chart参数
  * @param {Object[]} rawData 返回段返回的data数据
+ * @param {Object[]} yAxis
  * @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
  */
 // eslint-disable-next-line import/prefer-default-export
-export function generateChartOption(rawData) {
+export function generateChartOption(rawData, yAxis) {
+  console.log(yAxis);
   const data = generateParams(rawData);
   const option = {
     color: colors,
@@ -72,100 +195,7 @@ export function generateChartOption(rawData) {
         data: data.time,
       },
     ],
-    yAxis: [
+    yAxis: yAxisData,
-      {
-        type: 'value',
-        name: 'SO2(ppb)',
-        position: 'left',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[0] },
-        },
-        axisLabel: { formatter: '{value}ppb' },
-      },
-      {
-        type: 'value',
-        name: '盐分阻抗(Ω)',
-        // min: 0,
-        // max: 250,
-        position: 'left',
-        offset: 70,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[1] },
-        },
-        axisLabel: { formatter: '{value}Ω' },
-      },
-      {
-        type: 'value',
-        name: '环温(℃)',
-        // min: 0,
-        // max: 25,
-        position: 'left',
-        offset: 135,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[2] },
-        },
-        axisLabel: { formatter: '{value}°C' },
-      },
-      {
-        type: 'value',
-        name: '环湿(RH%)',
-        // min: 0,
-        // max: 25,
-        position: 'left',
-        offset: 200,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[3] },
-        },
-        axisLabel: { formatter: '{value}RH%' },
-      },
-      {
-        type: 'value',
-        name: '锌腐蚀电流(nA)',
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[4] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '铜腐蚀电流(nA)',
-        offset: 100,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[5] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '铝腐蚀电流(nA)',
-        offset: 200,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[6] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '钢腐蚀电流(nA)',
-        offset: 300,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[7] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-    ],
     series: [
       {
         name: 'SO2(ppb)',

src/views/statistical-report.vue

@@ -1,6 +1,6 @@
 <template>
   <SearchBar ref="searchBar" :loading-search="loadingSearch" @search="onSearch" />
-  <HistoryData ref="childRef" :search-height="searchHeight" class="mt-4" />
+  <HistoryData :search-height="searchHeight" class="mt-4" />
 </template>
 
 <script setup>
@@ -9,13 +9,10 @@ import HistoryData from 'components/statistical/stastistical-chart.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 
-const childRef = ref(null);
 const searchBar = ref(null);
-
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
-const realtimeData = computed(() => store.state.statistics.realtimeData);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 const search = ref({});
 const loadingSearch = ref(false);
@@ -37,6 +34,7 @@ onMounted(() => {
 const getData = async () => {
   try {
     if (token && token.value) {
+      if (!currentDeviceId.value) return;
       loadingSearch.value = true;
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
@@ -48,7 +46,6 @@ const getData = async () => {
       await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
       timer = null;
-      childRef.value.render(realtimeData.value.data);
       loadingSearch.value = false;
     } else {
       loadingSearch.value = false;