饼图改成曲线

src/index.html

@@ -175,7 +175,7 @@
                 <li>热水</li>
               </ul>
             </div>
-            <div class="echarts-content" id="pie_chart_4"></div>
+            <div class="echarts-content" id="line_chart_4"></div>
           </div>
         </div>
 

src/js/index.js

@@ -46,36 +46,82 @@ const echart3Data = [
   },
 ];
 
-const echart4Data = [
-  {
-    value: 110,
-    name: "暖通",
-    itemStyle: {
-      color: "#4380f0",
-    },
-  },
-  {
-    value: 888,
-    name: "照明",
-    itemStyle: {
-      color: "#01faf2",
-    },
-  },
-  {
-    value: 222,
-    name: "电梯",
-    itemStyle: {
-      color: "#eef043",
-    },
-  },
-  {
-    value: 333,
-    name: "热水",
-    itemStyle: {
-      color: "#c596ff",
-    },
-  },
-];
+// const echart4Data = [
+//   {
+//     value: 110,
+//     name: "暖通",
+//     itemStyle: {
+//       color: "#4380f0",
+//     },
+//   },
+//   {
+//     value: 888,
+//     name: "照明",
+//     itemStyle: {
+//       color: "#01faf2",
+//     },
+//   },
+//   {
+//     value: 222,
+//     name: "电梯",
+//     itemStyle: {
+//       color: "#eef043",
+//     },
+//   },
+//   {
+//     value: 333,
+//     name: "热水",
+//     itemStyle: {
+//       color: "#c596ff",
+//     },
+//   },
+// ];
+
+const echart4Data = {
+  date: [
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "24",
+  ],
+  line1: [
+    100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
+    190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100,
+  ],
+  line2: [
+    200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
+    100, 90, 100, 250, 100, 1000, 100, 250, 500,
+  ],
+  line3: [
+    300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
+    100, 90, 100, 250, 100, 1000, 100, 250, 400,
+  ],
+  line4: [
+    400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
+    100, 90, 100, 250, 100, 1000, 100, 250, 300,
+  ],
+};
 
 const echart5Data = {
   date: [
@@ -509,8 +555,38 @@ const leftLineChart = () => {
 };
 
 const rightLineChart = () => {
-  const pieChart4 = echarts.init(document.getElementById("pie_chart_4"));
-  pieChart4.setOption(pieChartOption(echart4Data, false, " kW"));
+  // const pieChart4 = echarts.init(document.getElementById("pie_chart_4"));
+  // pieChart4.setOption(pieChartOption(echart4Data, false, " kW"));
+
+  const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
+  lineChart4.setOption(
+    lineChartOption(
+      echart4Data.date,
+      [
+        {
+          data: echart4Data.line1,
+          color: "#4380f0",
+          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        },
+        {
+          data: echart4Data.line2,
+          color: "#01faf2",
+          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        },
+        {
+          data: echart4Data.line3,
+          color: "#eef043",
+          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        },
+        {
+          data: echart4Data.line4,
+          color: "#c596ff",
+          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        },
+      ],
+      3
+    )
+  );
 
   const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
   lineChart5.setOption(