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,36 +43,7 @@ function generateParams(data) {
   return result;
 }
 
-/**
+const yAxisData = [
- * 生成chart参数
- * @param {Object[]} rawData 返回段返回的data数据
- * @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) {
-  const data = generateParams(rawData);
-  const option = {
-    color: colors,
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'cross' },
-    },
-    grid: {
-      right: '30%',
-      left: '20%',
-    },
-    legend: {
-      data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'],
-    },
-    dataZoom: [{ type: 'inside' }, { type: 'slider' }],
-    xAxis: [
-      {
-        type: 'category',
-        axisTick: { alignWithLabel: true },
-        data: data.time,
-      },
-    ],
-    yAxis: [
   {
     type: 'value',
     name: 'SO2(ppb)',
@@ -165,7 +136,66 @@ export function generateChartOption(rawData) {
     },
     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, yAxis) {
+  console.log(yAxis);
+  const data = generateParams(rawData);
+  const option = {
+    color: colors,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+    },
+    grid: {
+      right: '30%',
+      left: '20%',
+    },
+    legend: {
+      data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'],
+    },
+    dataZoom: [{ type: 'inside' }, { type: 'slider' }],
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: { alignWithLabel: true },
+        data: data.time,
+      },
     ],
+    yAxis: yAxisData,
     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;