feat: 数据统计多轴交互调整

src/components/statistical/stastistical-chart.vue

@@ -8,12 +8,12 @@
 <script setup>
 import { computed, defineExpose, defineProps, onMounted, ref, watchEffect } from 'vue';
 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';
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
+import { generateChartOption } from 'utils/statistical';
 
 echarts.use([
   ToolboxComponent,
@@ -36,6 +36,10 @@ let myChart = null;
 // 设置图表
 onMounted(() => {
   isMounted.value = true;
+  window.addEventListener('resize', () => {
+    if (!myChart) return;
+    myChart.resize();
+  });
 });
 
 watchEffect(() => {
@@ -52,14 +56,14 @@ function initChart(data) {
   chartDom.style.height = `${canvasHeight}px`;
   myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
-  render(data, generateDefaultYAxis());
+  render(data);
 
   myChart.on('legendselectchanged', event => {
-    render(data, generateYAxis(event.selected));
+    render(data, event.selected);
   });
 }
 
-function render(data, yAxis) {
+function render(data, selected) {
   // myChart && myChart.clear();
   if (!data || !data.length) {
     noData.value = true;
@@ -70,7 +74,7 @@ function render(data, yAxis) {
   if (!myChart) {
     initChart();
   }
-  const option = generateChartOption(data, yAxis);
+  const option = generateChartOption(data, selected);
   option && myChart.setOption(option);
 }
 

src/config/chart.js

@@ -0,0 +1,165 @@
+/* eslint-disable max-len */
+export const colors = ['#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75'];
+
+// 默认legend
+export const defaultSelectedLegend = {
+  '钢腐蚀电流(nA)': true,
+  '铜腐蚀电流(nA)': true,
+  '铝腐蚀电流(nA)': true,
+  '锌腐蚀电流(nA)': true,
+  'SO2(ppb)': false,
+  '盐分阻抗(Ω)': false,
+  '环温(℃)': false,
+  '环湿(RH%)': false,
+};
+
+// y轴定义
+export const yAxisData = [
+  {
+    type: 'value',
+    name: 'SO2(ppb)',
+    position: 'left',
+    show: false,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[0] },
+    },
+    axisLabel: { formatter: '{value}ppb' },
+  },
+  {
+    type: 'value',
+    name: '盐分阻抗(Ω)',
+    show: false,
+    position: 'left',
+    offset: 70,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[1] },
+    },
+    axisLabel: { formatter: '{value}Ω' },
+  },
+  {
+    type: 'value',
+    name: '环温(℃)',
+    show: false,
+    position: 'left',
+    offset: 135,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[2] },
+    },
+    axisLabel: { formatter: '{value}°C' },
+  },
+  {
+    type: 'value',
+    name: '环湿(RH%)',
+    show: false,
+    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}' },
+  },
+];
+
+/**
+ * 生成默认数据
+ * @param {Object} data
+ * @returns {[{data: (number|[]|string|*), name: string, type: string},{data: (number|[]|BufferSource|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: [], name: string, type: string, yAxisIndex: number},null,null,null]}
+ */
+export function generateDefaultSeries(data) {
+  return [
+    {
+      name: 'SO2(ppb)',
+      type: 'line',
+      data: data.so2,
+    },
+    {
+      name: '盐分阻抗(Ω)',
+      type: 'line',
+      yAxisIndex: 1,
+      data: data.salt,
+    },
+    {
+      name: '环温(℃)',
+      type: 'line',
+      yAxisIndex: 2,
+      data: data.environmentTemperature,
+    },
+    {
+      name: '环湿(RH%)',
+      type: 'line',
+      yAxisIndex: 3,
+      data: data.environmentHumidity,
+    },
+    {
+      name: '锌腐蚀电流(nA)',
+      type: 'line',
+      yAxisIndex: 4,
+      data: data.corrosionXIN,
+    },
+    {
+      name: '铜腐蚀电流(nA)',
+      type: 'line',
+      yAxisIndex: 5,
+      data: data.corrosionTONG,
+    },
+    {
+      name: '铝腐蚀电流(nA)',
+      type: 'line',
+      yAxisIndex: 6,
+      data: data.corrosionLV,
+    },
+    {
+      name: '钢腐蚀电流(nA)',
+      type: 'line',
+      yAxisIndex: 7,
+      data: data.corrosionGANG,
+    },
+  ];
+}

src/utils/statistical.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len,object-curly-newline */
 import dayjs from 'dayjs';
-
-const colors = ['#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75'];
+import max from 'lodash/max';
+import { colors, defaultSelectedLegend, generateDefaultSeries, yAxisData } from '@/config/chart';
 
 /**
  * 生成chart所需参数
@@ -43,125 +43,62 @@ 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]);
+  let leftIndex = 0;
+  let rightIndex = 0;
+  yAxisData.forEach(item => {
+    item.show = selectedLegend[item.name];
+    if (item.show) {
+      if (item.position === 'left') {
+        item.offset = 70 * leftIndex;
+        leftIndex += 1;
+      } else {
+        item.offset = 85 * rightIndex;
+        rightIndex += 1;
+      }
+    }
+  });
+  return yAxisData;
 }
 
 /**
- * 生成初始状态的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})[]}
+ * 生成series数据
+ * @param {Object} data
+ * @param {Object[]} yAxis
+ * @returns {({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]}
  */
-export function generateDefaultYAxis() {
-  const selectedLegend = [
-    {
-      '钢腐蚀电流(nA)': true,
-      '铜腐蚀电流(nA)': true,
-      '铝腐蚀电流(nA)': true,
-      '锌腐蚀电流(nA)': true,
-    },
-  ];
-  return yAxisData.filter(item => selectedLegend.find(selected => selected[item.name]));
+function generateSeries(data, yAxis) {
+  const seriesArr = generateDefaultSeries(data);
+  const showArr = seriesArr.filter(item => yAxis.find(y => y.name === item.name));
+  const hideArr = seriesArr.filter(item => !yAxis.find(y => y.name === item.name));
+  const result = [...showArr, ...hideArr];
+  result.forEach((item, index) => {
+    item.yAxisIndex = index;
+  });
+  return result || [];
+}
+
+function genereteGrid(yAxis) {
+  const left = [];
+  const right = [];
+  yAxis.forEach(item => {
+    if (item.show) {
+      if (item.position === 'left') {
+        left.push(item.offset || 0);
+      } else {
+        right.push(item.offset || 0);
+      }
+    }
+  });
+  return {
+    left: max(left) + 45,
+    right: max(right) + 45,
+  };
 }
 
 /**
@@ -171,20 +108,23 @@ export function generateDefaultYAxis() {
  * @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);
+export function generateChartOption(rawData, selected = defaultSelectedLegend) {
   const data = generateParams(rawData);
+  const yAxis = generateYAxis(selected);
+  const series = generateSeries(data, yAxis);
+  const grid = genereteGrid(yAxis);
   const option = {
     color: colors,
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'cross' },
-    },
-    grid: {
-      right: '30%',
-      left: '20%',
+      axisPointer: {
+        type: 'cross',
+        snap: true,
+      },
     },
+    grid,
     legend: {
+      selected,
       data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'],
     },
     dataZoom: [{ type: 'inside' }, { type: 'slider' }],
@@ -195,57 +135,8 @@ export function generateChartOption(rawData, yAxis) {
         data: data.time,
       },
     ],
-    yAxis: yAxisData,
-    series: [
-      {
-        name: 'SO2(ppb)',
-        type: 'line',
-        data: data.so2,
-      },
-      {
-        name: '盐分阻抗(Ω)',
-        type: 'line',
-        yAxisIndex: 1,
-        data: data.salt,
-      },
-      {
-        name: '环温(℃)',
-        type: 'line',
-        yAxisIndex: 2,
-        data: data.environmentTemperature,
-      },
-      {
-        name: '环湿(RH%)',
-        type: 'line',
-        yAxisIndex: 3,
-        data: data.environmentHumidity,
-      },
-      {
-        name: '锌腐蚀电流(nA)',
-        type: 'line',
-        yAxisIndex: 4,
-        data: data.corrosionXIN,
-      },
-      {
-        name: '铜腐蚀电流(nA)',
-        type: 'line',
-        yAxisIndex: 5,
-        data: data.corrosionTONG,
-      },
-      {
-        name: '铝腐蚀电流(nA)',
-        type: 'line',
-        yAxisIndex: 6,
-        data: data.corrosionLV,
-      },
-      {
-        name: '钢腐蚀电流(nA)',
-        type: 'line',
-        yAxisIndex: 7,
-        data: data.corrosionGANG,
-      },
-    ],
+    yAxis,
+    series,
   };
-
   return option;
 }