【01/02.js】创建并配置多个ApexCharts图表和Leaflet地图，响应主题颜色变化

2024-07-03 12:07:34 +08:00
parent a7ccae81ce
commit 8702f4f60c
2 changed files with 1032 additions and 0 deletions
@@ -0,0 +1,215 @@
+(function(jQuery) {
+
+    "use strict";
+    // for apexchart
+    function apexChartUpdate(chart, detail) {
+      let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
+      if (detail.dark) {
+        color = getComputedStyle(document.documentElement).getPropertyValue('--white');
+      }
+      chart.updateOptions({
+        chart: {
+          foreColor: color
+        }
+      })
+    }
+
+    if (jQuery("#hospital-chart-02").length) var donut = new Morris.Donut({
+        element: "hospital-chart-02",
+        resize: !0,
+        colors: ["#4788ff", "#4fd69c", "#37d5f2", "#f75676"],
+        data: [
+          {
+            label: "New Patient",
+            value: 40
+          },
+          {
+            label: "Exit Patient",
+            value: 12
+          },
+          {
+            label: "ICU Patient",
+            value: 20
+          },
+          {
+            label: "Discharge Patient",
+            value: 33
+          }
+        ],
+        hideHover: "auto"
+    });
+
+    if (jQuery("#hospital-chart-03").length) {
+        const options = {
+          series: [{
+            name: 'Operation',
+            data: [44, 25, 10, 60, 50, 25, 40, 20]
+          }, {
+            name: 'Visitors',
+            data: [25, 38, 70, 0, 30, 15, 30, 30]
+          }],
+          colors: ['#4788ff', '#4fd69c'],
+          chart: {
+            type: 'bar',
+            height: 340,
+            stacked: true,
+            zoom: {
+              enabled: true
+            }
+          },
+          responsive: [{
+            breakpoint: 580,
+            options: {
+              legend: {
+                position: 'bottom',
+                offsetX: -30,
+                offsetY: 0,
+              }
+            }
+          }],
+          plotOptions: {
+            bar: {
+              horizontal: false,
+              borderRadius: 4
+            },
+          },
+          xaxis: {
+            type: 'category',
+            categories: ['India', 'Canada', 'U.S.A', 'Africa', 'London ', 'Europe ','Dubai','Kuvet'],
+          },
+           yaxis: {
+            labels: {
+                offsetY: 0,
+                minWidth: 20,
+                maxWidth: 20,
+              }
+           },
+          legend: {
+            position: 'top',
+            offsetX: -35
+          },
+          fill: {
+            opacity: 1
+          },
+          dataLabels: {
+            enabled: false
+          }
+        };
+      
+        const chart = new ApexCharts(document.querySelector("#hospital-chart-03"), options);
+        chart.render();
+        const body = document.querySelector('body')
+        if (body.classList.contains('dark')) {
+          apexChartUpdate(chart, {
+            dark: true
+          })
+        }
+      
+        document.addEventListener('ChangeColorMode', function (e) {
+          apexChartUpdate(chart, e.detail)
+        })
+      
+      }
+
+      if (jQuery("#dash-chart-04").length) {
+        const options = {
+          series: [{
+            name: 'Success',
+            data: [110, 85, 87, 40, 45, 20, 91, 45, 94, 88]
+          }, {
+            name: 'Failed',
+            data: [40, 55, 35, 30, 75, 80, 63, 45, 66, 115]
+          }],
+          chart: {
+            type: 'bar',
+            height: 280
+          },
+          colors: ['#4788ff', '#f75676'],
+          plotOptions: {
+            bar: {
+              horizontal: false,
+              borderRadius: 4
+            },
+          },
+          legend: {
+            position: 'bottom',
+            offsetX: 35
+          },
+          dataLabels: {
+            enabled: false
+          },
+          stroke: {
+            show: true,
+            width: 2,
+            colors: ['transparent']
+          },
+          xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+          },
+          yaxis: {
+            title: {
+              text: '$ (thousands)'
+            },
+            labels: {
+                offsetY: 0,
+                minWidth: 20,
+                maxWidth: 20,
+            }
+          },
+          fill: {
+            opacity: 1
+          },
+          tooltip: {
+            y: {
+              formatter: function (val) {
+                return "$ " + val + " thousands"
+              }
+            }
+          }
+        };
+      
+        const chart = new ApexCharts(document.querySelector("#dash-chart-04"), options);
+        chart.render();
+        const body = document.querySelector('body')
+        if (body.classList.contains('dark')) {
+          apexChartUpdate(chart, {
+            dark: true
+          })
+        }
+      
+        document.addEventListener('ChangeColorMode', function (e) {
+          apexChartUpdate(chart, e.detail)
+        })
+      
+      }
+
+      if (jQuery("#hospital-chart-05").length) {
+        var options = {
+          series: [22, 83, 10, 30],
+          colors: ['#f75676', '#4fd69c', '#37d5f2', '#4788ff'],
+          chart: {
+            height: 290,
+            type: 'pie',
+          },
+          legend: {
+            position: 'bottom',
+            offsetX: 0
+          },
+          labels: ['Cancelled', 'Completed', 'Pending', 'Upcoming'],
+      
+        };
+        var chart = new ApexCharts(document.querySelector("#hospital-chart-05"), options);
+        chart.render();
+        const body = document.querySelector('body')
+        if (body.classList.contains('dark')) {
+          apexChartUpdate(chart, {
+            dark: true
+          })
+        }
+      
+        document.addEventListener('ChangeColorMode', function (e) {
+          apexChartUpdate(chart, e.detail)
+        })
+      }
+      
+})(jQuery);