修改

src/page/Component/BarChart/chart.config.ts

@@ -2,7 +2,7 @@ import * as echarts from "echarts";
 export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
   if (dataProps.length === 0) return null;
   return {
-    grid: { top: 30, right: 12, bottom: 26, left: 48 },
+    grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
     legend: {
       show: false,
     },

src/page/Component/BarLineChart/chart.config.ts

@@ -0,0 +1,125 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  // if (dataProps.length === 0) return null;
+  return {
+    grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
+    legend: {
+      show: false,
+    },
+    xAxis: {
+      type: "category",
+      data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        interval: 0,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: [{
+      name: "单位/片",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },{
+      name: "良品率/%",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    }],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "luoyang-chart-tooltip",
+      show: false,
+    },
+    series: [
+      {
+        data: [100,200,110,22,11,458,15,2,45],
+        type: "bar",
+        barWidth: 10,
+        barGap:0,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(157, 234, 245, 1)' },
+            { offset: 1, color: 'rgba(110, 249, 222, 1)' },
+          ]),
+        },
+      },
+      {
+        data: [10,20,11,221,111,48,115,211,145],
+        type: "bar",
+        barWidth: 10,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(92, 183, 255, 1)' },
+            { offset: 1, color: 'rgba(54, 75, 254, 1)' },
+          ]),
+        },
+      },
+      {
+        data: [100,99,89,89,88,98,100,98,95],
+        type: "line",
+        yAxisIndex: 1,
+        symbol:'circle',
+        symbolSize: 7,
+        color:'rgba(18, 255, 245, 1)',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
+            { offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
+            { offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
+          ]),
+        }
+      }
+    ],
+  };
+}