echarts 添加全选反选

src/views/dataReport/components/line.vue

@@ -77,6 +77,41 @@ export default {
         //animation: false,
         legend: {
           data: legendData,
+          // textStyle: {
+          //   color: this.xFontColor,
+          // },
+          lineStyle: {
+            width: 2,
+          },
+          icon: "circle",
+          selector: [
+            {
+              // 全选
+              type: "all",
+              // 可以是任意你喜欢的标题
+              title: "全选",
+            },
+            {
+              // 反选
+              type: "inverse",
+              // 可以是任意你喜欢的标题
+              title: "反选",
+            },
+          ],
+          selectorLabel: {
+            show: true,
+            color: this.xFontColor, // 与 textStyle 的颜色一致
+            backgroundColor: "rgba(3, 188, 255, 0.5)", // 或者您可以选择一个与整体背景一致的颜色
+            padding: [4, 8], // 可以根据需要调整，这里示例为上下4px，左右8px
+            // 如果您想要边框，可以添加 borderColor 和 borderWidth
+            borderColor: this.xFontColor,
+            borderWidth: 0.5,
+            borderRadius: 2,
+            width: 30,
+            height: 16,
+            lineHeight: 16,
+            align: "center",
+          },
         },
         tooltip: {
           trigger: "axis",

src/views/realTimeData/components/line.vue

@@ -77,6 +77,35 @@ export default {
         //animation: false,
         legend: {
           data: legendData,
+          icon: "circle",
+          selectorLabel: {
+            show: true,
+            color: this.xFontColor, // 与 textStyle 的颜色一致
+            backgroundColor: "rgba(3, 188, 255, 0.5)", // 或者您可以选择一个与整体背景一致的颜色
+            padding: [4, 8], // 可以根据需要调整，这里示例为上下4px，左右8px
+            // 如果您想要边框，可以添加 borderColor 和 borderWidth
+            borderColor: this.xFontColor,
+            borderWidth: 0.5,
+            borderRadius: 2,
+            width: 30,
+            height: 16,
+            lineHeight: 16,
+            align: "center",
+          },
+          selector: [
+            {
+              // 全选
+              type: "all",
+              // 可以是任意你喜欢的标题
+              title: "全选",
+            },
+            {
+              // 反选
+              type: "inverse",
+              // 可以是任意你喜欢的标题
+              title: "反选",
+            },
+          ],
         },
         tooltip: {
           trigger: "axis",