优化曲线图配置，添加封面

src/packages/components/Charts/MyComponents/LineGraph01/config.ts

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGraph01Config } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
 import dataJson from './data.json'
 export interface DataSourceItem {
   dataname: string;
@@ -101,14 +100,22 @@ export const option = {
   series: [seriesItem]
 };
 
-
+const configSet = {
-
+  titlefontWeight: 'normal',
+  titlefontSize: 17,
+  titlefontStyle: 'normal',
+  titlecolor: '#ffffff',
+  titlePaddingX: 0,
+  titlePaddingY: 0,
+  isShowButton: false
+}
+export { configSet }
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineGraph01Config.key
   public chartConfig = cloneDeep(LineGraph01Config)
   public mockData = dataJson
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
 

src/packages/components/Charts/MyComponents/LineGraph01/index.vue

@@ -196,8 +196,15 @@
       </defs>
     </svg>
     <div class="buttonContent">
-      <span class="title">{{ configData.title }}</span>
+      <span class="title" :style="{
-      <button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
+        color: configSet.titlecolor,
+        fontSize: configSet.titlefontSize + 'px',
+        fontStyle: configSet.titlefontStyle,
+        fontWeight: configSet.titlefontWeight,
+        marginTop: configSet.titlePaddingY + 'px',
+        marginLeft: configSet.titlePaddingX + 'px'
+      }">{{ configData.title }}</span>
+      <button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
         {{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
       </button>
     </div>
@@ -228,7 +235,7 @@
     </div>
     <div class="chartsContent">
       <span class="smallText Tips">
-        <img class="icon" src="./icon01.png" alt="">
+        <img class="icon" src="./assets/icon01.png" alt="">
         {{ configData.tip }}</span>
       <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
         replaceMerge: replaceMergeArr
@@ -244,14 +251,14 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import Config, { DatasType, includes, seriesItem } from './config'
+import Config, { DatasType, includes, seriesItem, configSet } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
-
+import { config } from 'process'
-const isShowButton = false;
+// const isShowButton = false;
 
 const props = defineProps({
   themeSetting: {
@@ -342,7 +349,12 @@ watch(
     const parsedData = parseMockData(newMockData);
     selectedIndex.value = parsedData.dataIndex;
   },
-  { immediate: true, deep: true }
+  {
+    immediate: true,
+    deep:
+      // true 
+      false
+  }
 );
 
 
@@ -363,10 +375,10 @@ const chartOption = computed(() => {
   return mergedOption;
 });
 
-const wrapperStyle = computed(() => ({
+// const wrapperStyle = computed(() => ({
-  width: props.chartConfig.attr.w + 'px',
+//   width: props.chartConfig.attr.w + 'px',
-  height: "16%"
+//   height: "16%"
-}))
+// }))
 
 
 // dataset 无法变更条数的补丁 (保持不变)
@@ -430,7 +442,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 @include go(border-box) {
   position: relative;
-  border-radius: 5px;
+  border-radius: 10px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -641,13 +653,15 @@ onUnmounted(() => {
 
 
 .buttonContent span {
-  font-size: 15px;
+  font-size: 17px;
   color: #ffffff;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
-  font-weight: 550;
+  font-weight: normal;
   text-shadow: -4px -4px 10px #3B8ED4;
   padding: 0;
   margin: 0;
+  margin-top: -2px;
+
 
 }
 </style>

src/packages/components/Charts/MyComponents/LineGraph02/config.ts

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGraph02Config } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
 import dataJson from './data.json'
 export interface DataSourceItem {
   dataname: string;
@@ -101,6 +100,16 @@ export const option = {
   series: [seriesItem]
 };
 
+const configSet = {
+  titlefontWeight: 'normal',
+  titlefontSize: 17,
+  titlefontStyle: 'normal',
+  titlecolor: '#ffffff',
+  titlePaddingX: 0,
+  titlePaddingY: 0,
+  isShowButton: false
+}
+export { configSet }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -109,6 +118,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public mockData = dataJson
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
 

src/packages/components/Charts/MyComponents/LineGraph02/index.vue

@@ -2,10 +2,15 @@
   <div class="go-border-box">
     <!-- timeshow 按钮，添加点击事件和 ref -->
     <div class="buttonContent">
-
+      <span class="title" :style="{
-      <span class="title">{{ configData.title }}</span>
+        color: configSet.titlecolor,
-
+        fontSize: configSet.titlefontSize + 'px',
-      <button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
+        fontStyle: configSet.titlefontStyle,
+        fontWeight: configSet.titlefontWeight,
+        marginTop: configSet.titlePaddingY + 'px',
+        marginLeft: configSet.titlePaddingX + 'px'
+      }">{{ configData.title }}</span>
+      <button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
         {{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
       </button>
     </div>
@@ -36,7 +41,7 @@
     </div>
     <div class="chartsContent">
       <span class="smallText Tips">
-        <img class="icon" src="./icon01.png" alt="">
+        <img class="icon" src="./assets/icon01.png" alt="">
         {{ configData.tip }}</span>
       <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
         replaceMerge: replaceMergeArr
@@ -53,14 +58,13 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import Config, { DatasType, includes, seriesItem } from './config'
+import Config, { DatasType, includes, seriesItem, configSet } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 
-const isShowButton = false;
 
 const props = defineProps({
   themeSetting: {
@@ -151,7 +155,7 @@ watch(
     const parsedData = parseMockData(newMockData);
     selectedIndex.value = parsedData.dataIndex;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: false }
 );
 
 
@@ -237,11 +241,7 @@ onUnmounted(() => {
 });
 </script>
 
-<script lang="ts">
+
-export default {
-  name: 'Componentz01'
-}
-</script>
 
 <style lang="scss" scoped>
 @include go(border-box) {
@@ -420,13 +420,11 @@ export default {
 
 .buttonContent span {
 
-  font-size: 15px;
+  font-size: 17px;
   color: #ffffff;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
-  font-weight: 550;
+  font-weight: normal;
   text-shadow: -4px -4px 10px #3B8ED4;
   padding: 0;
-  margin: 0;
-
 }
 </style>

src/packages/components/Charts/MyComponents/index.ts

@@ -6,14 +6,14 @@ import { WorkshopSceneConfig } from './WorkshopScene/index'
 import { DeviceStatusConfig } from './DeviceStatus/index'
 import { LineDropdownConfig } from './LineDropdown/index'
 import { PieCenterConfig } from './PieCenter/index'
-// import { LineGraph01Config } from './LineGraph01/index'
+import { LineGraph01Config } from './LineGraph01/index'
-// import { LineGraph02Config } from './LineGraph02/index'
+import { LineGraph02Config } from './LineGraph02/index'
 import { MaxTrimConfig } from './MaxTrim/index'
 import { SmallBorderConfig } from './SmallBorder/index'
 
 
 export default [
-  SmallBorderConfig,
+
   AlarmListConfig,
   SceneDistributionConfig,
   TopAlarmsConfig,
@@ -23,6 +23,7 @@ export default [
   LineDropdownConfig,
   PieCenterConfig,
   MaxTrimConfig,
-  // LineGraph01Config,
+  LineGraph01Config,
-  // LineGraph02Config,
+  LineGraph02Config,
+  SmallBorderConfig
 ]