Merge branch 'main' of github.com:le5le-com/visualization-design

public/theme/dark.json

@@ -0,0 +1,386 @@
+{
+    "color": [
+        "#4583ff",
+        "#37b3cc",
+        "#258ca6",
+        "#34bf6e",
+        "#239957",
+        "#3062da"
+    ],
+    "backgroundColor": "#181818",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#ffffff"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": "1",
+            "barBorderColor": "#181818"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#fd1050",
+            "color0": "#0cf49b",
+            "borderColor": "#fd1050",
+            "borderColor0": "#0cf49b",
+            "borderWidth": 1
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": "1",
+            "borderColor": "#181818"
+        },
+        "lineStyle": {
+            "width": 1,
+            "color": "#aaa"
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false,
+        "color": [
+            "#4583ff",
+            "#37b3cc",
+            "#258ca6",
+            "#34bf6e",
+            "#239957",
+            "#3062da"
+        ],
+        "label": {
+            "color": "#ffffff"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(255,255,255,0.26)"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(216,216,216,0.26)"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "rgba(255,255,255,0.7)"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "rgba(255,255,255,0.1)"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(255,255,255,0.26)"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(216,216,216,0.26)"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "rgba(255,255,255,0.7)"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "rgba(255,255,255,0.1)"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(255,255,255,0.26)"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(216,216,216,0.26)"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "rgba(255,255,255,0.7)"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "rgba(255,255,255,0.1)"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(255,255,255,0.26)"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "rgba(216,216,216,0.26)"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "rgba(255,255,255,0.7)"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "rgba(255,255,255,0.1)"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#ffffff"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "rgba(255,255,255,0.7)"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "rgba(216,216,216,0.3)",
+                "width": "1"
+            },
+            "crossStyle": {
+                "color": "rgba(216,216,216,0.3)",
+                "width": "1"
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#eeeeee",
+            "width": 1
+        },
+        "itemStyle": {
+            "color": "#dd6b66",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#eeeeee",
+            "borderColor": "#eeeeee",
+            "borderWidth": 0.5
+        },
+        "checkpointStyle": {
+            "color": "#e43c59",
+            "borderColor": "#c23531"
+        },
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#a9334c"
+            },
+            "controlStyle": {
+                "color": "#eeeeee",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#bf444c"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(47,69,84,0)",
+        "dataBackgroundColor": "rgba(255,255,255,0.3)",
+        "fillerColor": "rgba(167,183,204,0.4)",
+        "handleColor": "#a7b7cc",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#eeeeee"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#ffffff"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#ffffff"
+            }
+        }
+    }
+}

src/App.vue

@@ -6,11 +6,14 @@
 import { onBeforeMount } from 'vue';
 
 import { useUser } from './services/user';
+import { changeTheme, registerTheme } from './services/echarts';
 
 const { getUser } = useUser();
 
 onBeforeMount(() => {
   getUser();
+  registerTheme();
+  changeTheme('le-dark');
 });
 </script>
 <style lang="postcss" scoped></style>

src/services/echarts.ts

@@ -0,0 +1,1204 @@
+import { ReplaceMode } from '@meta2d/chart-diagram';
+
+//注册所有主题
+export function registerTheme() {
+  fetch('theme/dark.json')
+    .then((r) => r.json())
+    .then((theme) => {
+      echarts.registerTheme('le-dark', theme);
+    });
+}
+
+export function changeTheme(theme: string) {
+  charts.forEach((item) => {
+    item.list.forEach((chart) => {
+      if (chart.data.name === 'echarts') {
+        chart.data.echarts.theme = theme;
+      }
+    });
+  });
+}
+
+export const charts = [
+  {
+    name: 'Echarts - 基础图表',
+    show: true,
+    list: [
+      {
+        name: '折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 400,
+          height: 300,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'axis',
+              },
+              grid: {
+                top: 10,
+                bottom: 20,
+                left: 40,
+                right: 5,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                axisLabel: {
+                  fontSize: 12,
+                  // color: '#ffffff',
+                },
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {
+                  fontSize: 12,
+                  // color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [820, 932, 901, 934, 1290, 1330, 1320],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+      {
+        name: '柱状图',
+        icon: 'l-bar-chart',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'axis',
+              },
+              grid: {
+                top: 10,
+                bottom: 20,
+                left: 40,
+                right: 5,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                axisTick: {
+                  alignWithLabel: true,
+                },
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  name: '直接访问',
+                  type: 'bar',
+                  barWidth: '60%',
+                  label: {
+                    color: '#ffffff',
+                  },
+                  data: [10, 52, 200, 334, 390, 330, 220],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+      {
+        name: '饼图',
+        icon: 'l-pie-chart',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+              },
+              series: [
+                {
+                  type: 'pie',
+                  radius: ['50%', '70%'],
+                  label: {
+                    color: '#ffffff',
+                  },
+                  data: [
+                    { value: 335, name: '2D' },
+                    { value: 310, name: '3D' },
+                    { value: 234, name: '大屏' },
+                    { value: 135, name: '物联网平台' },
+                    { value: 1548, name: '图形库' },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '散点图',
+        icon: 'l-sandiantu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              grid: {
+                top: 10,
+                bottom: 20,
+                left: 40,
+                right: 10,
+              },
+              xAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              yAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  symbolSize: 10,
+                  data: [
+                    [10.0, 8.04],
+                    [8.07, 6.95],
+                    [13.0, 7.58],
+                    [9.05, 8.81],
+                    [11.0, 8.33],
+                    [14.0, 7.66],
+                    [13.4, 6.81],
+                    [10.0, 6.33],
+                    [14.0, 8.96],
+                    [12.5, 6.82],
+                    [9.15, 7.2],
+                    [11.5, 7.2],
+                    [3.03, 4.23],
+                    [12.2, 7.83],
+                    [2.02, 4.47],
+                    [1.05, 3.33],
+                    [4.05, 4.96],
+                    [6.03, 7.24],
+                    [12.0, 6.26],
+                    [12.0, 8.84],
+                    [7.08, 5.82],
+                    [5.02, 5.68],
+                  ],
+                  type: 'scatter',
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: 'K线图',
+        icon: 'l-kxiantu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 30,
+                left: 40,
+                right: 10,
+              },
+              xAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+                data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
+              },
+              yAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  type: 'candlestick',
+                  data: [
+                    [20, 34, 10, 38],
+                    [40, 35, 30, 50],
+                    [31, 38, 33, 44],
+                    [38, 15, 5, 42],
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '雷达图',
+        icon: 'l-leidatu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 30,
+                left: 40,
+                right: 10,
+              },
+              radar: {
+                // shape: 'circle',
+                indicator: [
+                  { name: 'Sales', max: 6500 },
+                  { name: 'Administration', max: 16000 },
+                  { name: 'Information Technology', max: 30000 },
+                  { name: 'Customer Support', max: 38000 },
+                  { name: 'Development', max: 52000 },
+                  { name: 'Marketing', max: 25000 },
+                ],
+              },
+              series: [
+                {
+                  name: 'Budget vs spending',
+                  type: 'radar',
+                  data: [
+                    {
+                      value: [4200, 3000, 20000, 35000, 50000, 18000],
+                      name: 'Allocated Budget',
+                    },
+                    {
+                      value: [5000, 14000, 28000, 26000, 42000, 21000],
+                      name: 'Actual Spending',
+                    },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '旭日图',
+        icon: 'l-xuritu',
+        data: {
+          width: 200,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              series: [
+                {
+                  radius: ['15%', '80%'],
+                  type: 'sunburst',
+                  data: [
+                    {
+                      children: [
+                        {
+                          value: 5,
+                          children: [
+                            {
+                              value: 1,
+                              itemStyle: {
+                                color: '#F54F4A',
+                              },
+                            },
+                            {
+                              value: 2,
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                              ],
+                            },
+                            {
+                              children: [
+                                {
+                                  value: 1,
+                                },
+                              ],
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#F54F4A',
+                          },
+                        },
+                        {
+                          value: 10,
+                          children: [
+                            {
+                              value: 6,
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#F54F4A',
+                                  },
+                                },
+                                {
+                                  value: 1,
+                                },
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                                {
+                                  value: 1,
+                                },
+                              ],
+                              itemStyle: {
+                                color: '#FFB499',
+                              },
+                            },
+                            {
+                              value: 2,
+                              children: [
+                                {
+                                  value: 1,
+                                },
+                              ],
+                              itemStyle: {
+                                color: '#FFB499',
+                              },
+                            },
+                            {
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                              ],
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#F54F4A',
+                          },
+                        },
+                      ],
+                      itemStyle: {
+                        color: '#F54F4A',
+                      },
+                    },
+                    {
+                      value: 9,
+                      children: [
+                        {
+                          value: 4,
+                          children: [
+                            {
+                              value: 2,
+                              itemStyle: {
+                                color: '#FF8C75',
+                              },
+                            },
+                            {
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#F54F4A',
+                                  },
+                                },
+                              ],
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#F54F4A',
+                          },
+                        },
+                        {
+                          children: [
+                            {
+                              value: 3,
+                              children: [
+                                {
+                                  value: 1,
+                                },
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                              ],
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#FFB499',
+                          },
+                        },
+                      ],
+                      itemStyle: {
+                        color: '#FF8C75',
+                      },
+                    },
+                    {
+                      value: 7,
+                      children: [
+                        {
+                          children: [
+                            {
+                              value: 1,
+                              itemStyle: {
+                                color: '#FFB499',
+                              },
+                            },
+                            {
+                              value: 3,
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                                {
+                                  value: 1,
+                                },
+                              ],
+                              itemStyle: {
+                                color: '#FF8C75',
+                              },
+                            },
+                            {
+                              value: 2,
+                              children: [
+                                {
+                                  value: 1,
+                                },
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#F54F4A',
+                                  },
+                                },
+                              ],
+                              itemStyle: {
+                                color: '#F54F4A',
+                              },
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#FFB499',
+                          },
+                        },
+                      ],
+                      itemStyle: {
+                        color: '#F54F4A',
+                      },
+                    },
+                    {
+                      children: [
+                        {
+                          value: 6,
+                          children: [
+                            {
+                              value: 1,
+                              itemStyle: {
+                                color: '#FF8C75',
+                              },
+                            },
+                            {
+                              value: 2,
+                              children: [
+                                {
+                                  value: 2,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                              ],
+                              itemStyle: {
+                                color: '#F54F4A',
+                              },
+                            },
+                            {
+                              value: 1,
+                              itemStyle: {
+                                color: '#FFB499',
+                              },
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#FFB499',
+                          },
+                        },
+                        {
+                          value: 3,
+                          children: [
+                            {
+                              value: 1,
+                            },
+                            {
+                              children: [
+                                {
+                                  value: 1,
+                                  itemStyle: {
+                                    color: '#FF8C75',
+                                  },
+                                },
+                              ],
+                            },
+                            {
+                              value: 1,
+                            },
+                          ],
+                          itemStyle: {
+                            color: '#FFB499',
+                          },
+                        },
+                      ],
+                      itemStyle: {
+                        color: '#F54F4A',
+                      },
+                    },
+                  ],
+                  label: {
+                    rotate: 'radial',
+                    color: '#ffffff',
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '桑基图',
+        icon: 'l-sangshentu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              series: {
+                type: 'sankey',
+                layout: 'none',
+                emphasis: {
+                  focus: 'adjacency',
+                },
+                data: [
+                  {
+                    name: 'a',
+                  },
+                  {
+                    name: 'b',
+                  },
+                  {
+                    name: 'a1',
+                  },
+                  {
+                    name: 'a2',
+                  },
+                  {
+                    name: 'b1',
+                  },
+                  {
+                    name: 'c',
+                  },
+                ],
+                links: [
+                  {
+                    source: 'a',
+                    target: 'a1',
+                    value: 5,
+                  },
+                  {
+                    source: 'a',
+                    target: 'a2',
+                    value: 3,
+                  },
+                  {
+                    source: 'b',
+                    target: 'b1',
+                    value: 8,
+                  },
+                  {
+                    source: 'a',
+                    target: 'b1',
+                    value: 3,
+                  },
+                  {
+                    source: 'b1',
+                    target: 'a1',
+                    value: 1,
+                  },
+                  {
+                    source: 'b1',
+                    target: 'c',
+                    value: 2,
+                  },
+                ],
+                lineStyle: {
+                  color: 'source',
+                  curveness: 0.5,
+                },
+                label: {
+                  color: '#ffffff',
+                  fontSize: 10,
+                },
+              },
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '漏斗图',
+        icon: 'l-loudoutu',
+        data: {
+          width: 200,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b} : {c}%',
+              },
+              series: [
+                {
+                  name: 'Expected',
+                  type: 'funnel',
+                  left: '2%',
+                  width: '80%',
+                  label: {
+                    color: '#ffffff',
+                    formatter: '{b}Expected',
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    opacity: 0.7,
+                  },
+                  emphasis: {
+                    label: {
+                      position: 'inside',
+                      formatter: '{b}Expected: {c}%',
+                    },
+                  },
+                  data: [
+                    { value: 60, name: 'Visit' },
+                    { value: 40, name: 'Inquiry' },
+                    { value: 20, name: 'Order' },
+                    { value: 80, name: 'Click' },
+                    { value: 100, name: 'Show' },
+                  ],
+                },
+                {
+                  name: 'Actual',
+                  type: 'funnel',
+                  left: '2%',
+                  width: '80%',
+                  maxSize: '80%',
+                  label: {
+                    position: 'inside',
+                    formatter: '{c}%',
+                    color: '#fff',
+                  },
+                  itemStyle: {
+                    opacity: 0.5,
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                  },
+                  emphasis: {
+                    label: {
+                      position: 'inside',
+                      formatter: '{b}Actual: {c}%',
+                    },
+                  },
+                  data: [
+                    { value: 30, name: 'Visit' },
+                    { value: 10, name: 'Inquiry' },
+                    { value: 5, name: 'Order' },
+                    { value: 50, name: 'Click' },
+                    { value: 80, name: 'Show' },
+                  ],
+                  z: 100,
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+      {
+        name: '仪表盘',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 200,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                formatter: '{a} <br/>{b} : {c}%',
+              },
+              series: [
+                {
+                  type: 'gauge',
+                  axisLine: {
+                    roundCap: true,
+                  },
+                  progress: {
+                    show: true,
+                    roundCap: true,
+                  },
+                  data: [{ value: 70 }],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    name: '乐吾乐Charts',
+    show: true,
+    list: [
+      {
+        name: '折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'lineChart',
+          width: 400,
+          disableAnchor: true,
+          height: 200,
+          chartsColor: [
+            '#1890ff',
+            '#2FC25B',
+            '#FACC14',
+            '#c23531',
+            '#2f4554',
+            '#61a0a8',
+            '#d48265',
+          ],
+          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          smooth: true,
+          data: [
+            [1820, 1932, 1901, 1934, 1990, 1830, 1920],
+            [1710, 1932, 1901, 1834, 1700, 1830, 1720],
+          ],
+        },
+      },
+      {
+        name: '柱状图',
+        icon: 'l-bar-chart',
+        data: {
+          name: 'histogram',
+          x: 600,
+          y: 100,
+          width: 400,
+          height: 200,
+          disableAnchor: true,
+          chartsColor: [
+            '#1890ff',
+            '#2FC25B',
+            '#FACC14',
+            '#c23531',
+            '#2f4554',
+            '#61a0a8',
+            '#d48265',
+          ],
+          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: [
+            [120, 200, 150, 80, 70, 110, 130],
+            [140, 250, 150, 80, 60, 10, 30],
+            [40, 50, 180, 210, 60, 70, 30],
+          ],
+        },
+      },
+      {
+        name: '饼图',
+        icon: 'l-pie-chart',
+        data: {
+          name: 'pieChart',
+          x: 100,
+          y: 300,
+          width: 400,
+          height: 200,
+          disableAnchor: true,
+          chartsColor: [
+            '#1890ff',
+            '#36CBCB',
+            '#2FC25B',
+            '#FACC14',
+            '#F2637B',
+            '#fc8452',
+            '#9a60b4',
+            '#ea7ccc',
+          ],
+          data: [
+            [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+            [
+              { value: 1548, name: 'Search' },
+              { value: 775, name: 'Direct' },
+              { value: 679, name: 'Market' },
+            ],
+          ],
+          chartsRadius: [
+            ['60%', '70%'],
+            ['0%', '50%'],
+          ],
+        },
+      },
+      {
+        name: '仪表盘',
+        icon: 'l-dashboard-chart',
+        data: {
+          name: 'gauge',
+          x: 600,
+          y: 300,
+          width: 400,
+          height: 400,
+          disableAnchor: true,
+          value: 90,
+          unit: 'm/s',
+          axisLine: [
+            [0.3, '#67e0e3'],
+            [0.7, '#37a2da'],
+            [1, '#fd666d'],
+          ],
+          animateCycle: 1,
+          keepAnimateState: 0,
+        },
+      },
+      {
+        name: '时钟',
+        icon: 'l-07',
+        data: {
+          name: 'gauge',
+          x: 600,
+          y: 300,
+          width: 400,
+          height: 400,
+          disableAnchor: true,
+          isClock: true,
+          startAngle: 90,
+          endAngle: -270,
+          min: 0,
+          max: 12,
+          splitNumber: 12,
+          background: '#3A3A3A',
+          color: '#C0911F',
+        },
+      },
+    ],
+  },
+  {
+    name: '折线图',
+    show: true,
+    list: [
+      {
+        name: '基础折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+                interval: 50,
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+      {
+        name: '双折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+                interval: 50,
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'line',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+    ],
+  },
+];

src/views/components/Graphics.vue

@@ -186,7 +186,8 @@ import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
-import { cases, shapes, charts, formComponents } from '@/services/defaults';
+import { cases, shapes, formComponents } from '@/services/defaults';
+import { charts } from '@/services/echarts';
 import { getFolders, getFiles, getIcons } from '@/services/png';
 import {
   getComponents,