feat: 图表添加对数 线性

src/components/statistical/stastistical-chart.vue

@@ -1,12 +1,25 @@
 <template>
   <el-card class="box-card">
     <el-empty v-if="noData" description="暂无数据"></el-empty>
+
+    <el-radio-group
+      v-show="!noData"
+      v-model="electricYType"
+      class="float-right -m-1"
+      size="small"
+      style="position: relative; z-index: 999"
+      @change="$emit('on-y-type-change', electricYType)"
+    >
+      <el-radio-button label="line">线性</el-radio-button>
+      <el-radio-button label="log">对数</el-radio-button>
+    </el-radio-group>
+
     <div id="realtimeContainer"></div>
   </el-card>
 </template>
 
 <script setup>
-import { computed, defineExpose, defineProps, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineExpose, defineProps, defineEmits, onMounted, ref, watchEffect } from 'vue';
 import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
@@ -26,6 +39,8 @@ echarts.use([
   DataZoomComponent,
 ]);
 
+defineEmits(['on-y-type-change']);
+
 const store = useStore();
 const props = defineProps({ searchHeight: Number });
 const realtimeData = computed(() => store.state.statistics.realtimeData);
@@ -33,6 +48,7 @@ const defaultSelectedLegend = computed(() => store.state.statistics.defaultSelec
 const isMounted = ref(false);
 const noData = ref(true);
 let myChart = null;
+const electricYType = ref('line'); // 电流Y轴类型 line线型 log对数型
 
 // 设置图表
 onMounted(() => {
@@ -55,7 +71,7 @@ function initChart(data) {
   const chartDom = document.getElementById('realtimeContainer');
   const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
   chartDom.style.height = `${canvasHeight}px`;
-  myChart && myChart.dispose();
+  // myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
   render(data, defaultSelectedLegend.value);
 

src/config/chart.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-export const colors = ['#EAB308', '#F97316', '#EC4899', '#F43F5E', '#D946EF', '#06B6D4', '#0EA5E9', '#3B82F6', '#6366F1'];
+export const colors = ['#EAB308', '#F97316', '#EC4899', '#F43F5E', '#D946EF', '#06B6D4', '#B45309', '#1E40AF', '#166534'];
 
 export const itemColor = {
   '钢腐蚀电流(nA)': colors[5],
@@ -61,19 +61,6 @@ export const legendData = [
   },
 ];
 
-// 默认legend select
-export const defaultSelectedLegend = {
-  '钢腐蚀电流(nA)': true,
-  '铜腐蚀电流(nA)': true,
-  '铝腐蚀电流(nA)': true,
-  '锌腐蚀电流(nA)': true,
-  'SO2(ppb)': false,
-  '盐分阻抗(Ω)': false,
-  '盐分温度(℃)': false,
-  '环境温度(℃)': false,
-  '环境湿度(RH%)': false,
-};
-
 // y轴定义
 export const yAxisData = [
   {
@@ -83,7 +70,7 @@ export const yAxisData = [
     position: 'left',
     axisLine: {
       show: true,
-      lineStyle: { color: colors[6] },
+      lineStyle: { color: colors[7] },
     },
     axisLabel: { formatter: '{value}' },
     axisPointer: { show: false },

src/utils/statistical.js

@@ -160,6 +160,7 @@ export function generateChartOption(rawData, selected) {
     grid,
     legend: {
       type: 'scroll',
+      right: 140,
       selected,
       data: legendData,
     },

src/views/statistical-report.vue

@@ -1,6 +1,6 @@
 <template>
   <SearchBar ref="searchBar" :loading-search="loadingSearch" @search="onSearch" />
-  <HistoryData :search-height="searchHeight" class="mt-4" />
+  <HistoryData :search-height="searchHeight" class="mt-4" @on-y-type-change="onChangeYType" />
 </template>
 
 <script setup>
@@ -19,6 +19,7 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
 const search = ref({});
 const loadingSearch = ref(false);
 const searchHeight = ref(50);
+const showLogarithm = ref(false); // 电流y轴类型 false(line线性) true(log对数)
 
 onMounted(() => {
   searchHeight.value = searchBar.value.$el.clientHeight;
@@ -44,6 +45,7 @@ const getData = async () => {
         deviceId: currentDeviceId.value,
         gatheredDateRange: date,
         paging: false,
+        showLogarithm: showLogarithm.value,
         sort: [
           {
             col: 'time',
@@ -69,6 +71,15 @@ const getData = async () => {
 
 getData();
 
+/**
+ * 切换线性/对数
+ * @param {string} yType 电流y轴类型 line线性 log对数
+ */
+function onChangeYType(yType) {
+  showLogarithm.value = yType === 'log';
+  getData();
+}
+
 /**
  * 监听search信息
  * @param {object} payload search组件emit的数据