样式优化

src/components/charts/ContinuousLine.vue

@@ -35,13 +35,13 @@ const init = () => {
   const dateStr = chgContent.value.map(x => x.dateStr)
   // 最高空间板
   const brokenSlabCount = chgContent.value.map(x => x.brokenSlabCount)
-  // 首板数量
-  const firstLimitUpCount = chgContent.value.map(x => x.firstLimitUpCount)
   // 二板数量
   const secondLimitUpCount = chgContent.value.map(x => x.secondLimitUpCount)
   // 三板数量
   const thirdLimitUpCount = chgContent.value.map(x => x.thirdLimitUpCount)
   const myChart = echarts.init(ContinuousLine.value)
+  // 连板总数
+  const continuous = chgContent.value.map(x => x.continuous)
   // 指定图表的配置项和数据
   const option = {
     title: {
@@ -71,8 +71,9 @@ const init = () => {
       }
     },
     legend: {
-      data: ['最高空间板', '炸板数量', '首板数量', '二板数量', '三板数量'],
+      data: ['最高空间板', '炸板数量', '二板数量', '三板数量', '连板总数'],
-      left: 10
+      left: 'center',
+      top: '30px'
     },
     dataZoom: [
       {
@@ -91,7 +92,6 @@ const init = () => {
     xAxis: [
       {
         type: 'category',
-        boundaryGap: false,
         data: dateStr
       }
     ],
@@ -111,34 +111,37 @@ const init = () => {
         data: brokenSlabCount
       },
       {
-        name: '首板数量',
+        name: '二板数量',
         type: 'line',
         smooth: true,
         // yAxisIndex: 1,
         lineStyle: {
           width: 1
         },
-        data: firstLimitUpCount
+        data: secondLimitUpCount
       },
       {
-        name: '二板数量',
+        name: '三板数量',
         type: 'line',
         smooth: true,
         // yAxisIndex: 1,
         lineStyle: {
           width: 1
         },
-        data: secondLimitUpCount
+        data: thirdLimitUpCount
       },
       {
-        name: '三板数量',
+        name: '连板总数',
         type: 'line',
         smooth: true,
         // yAxisIndex: 1,
         lineStyle: {
           width: 1
         },
-        data: thirdLimitUpCount
+        emphasis: {
+          focus: 'series'
+        },
+        data: continuous
       }
     ]
   }

src/components/charts/UpLow.vue

@@ -74,7 +74,8 @@ const init = () => {
     },
     legend: {
       data: ['上涨家数', '下跌家数'],
-      left: 10
+      left: 'center',
+      top: '30px'
     },
     dataZoom: [
       {

src/components/charts/UpLowLine.vue

@@ -33,6 +33,8 @@ watch(chgContent, (newValue) => {
 
 const init = () => {
   const dateStr = chgContent.value.map(x => x.dateStr)
+  // 首板数量
+  const firstLimitUpCount = chgContent.value.map(x => x.firstLimitUpCount)
   // 最高空间板
   const maxLimitUpDay = chgContent.value.map(x => x.maxLimitUpDay)
   // 炸板数量
@@ -69,8 +71,9 @@ const init = () => {
       }
     },
     legend: {
-      data: ['最高空间板', '炸板数量', '连板总数'],
+      data: ['最高空间板', '炸板数量', '连板总数', '首板数量'],
-      left: 10
+      left: 'center',
+      top: '30px'
     },
     dataZoom: [
       {
@@ -137,6 +140,16 @@ const init = () => {
           focus: 'series'
         },
         data: continuous
+      },
+      {
+        name: '首板数量',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        data: firstLimitUpCount
       }
     ]
   }