feat: echarts相关配置修改

src/services/echarts.ts

@@ -25,6 +25,149 @@ export const charts = [
     name: '折线图',
     show: true,
     list: [
+      {
+        name: '基础折线图-hover',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 20,
+                left: 20,
+                right: 20,
+                top: 80,
+                containLabel: true,
+              },
+
+              title: {
+                text: "标题",
+                textStyle: {
+                  fontSize: 16,
+                },
+                top: 0,
+                left: 20
+              },
+              // 图例
+              legend:{
+                data:['系列1'], // 该数组中的内容要与series中的每项的name对应
+                textStyle:{
+                  fontSize: 12
+                },
+                itemWidth: 25,
+                top: 30,
+                itemHeight: 14
+              },
+              // 提示框组件
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: "shadow"
+                },
+                textStyle: {
+                  fontSize: 12,
+                  fontWeight: 400
+                }
+                },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                  margin: 10
+                },
+              },
+              yAxis: {
+                type: 'value',
+                name: '单位',
+                nameGap: 15,
+                nameTextStyle:{
+                  fontSize: 12,
+                },
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  margin: 10,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
+              },
+              series: [
+                {
+                  name:"系列1",
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5, //小圆点的大小
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
       {
         name: '基础折线图',
         icon: 'l-line-chart',
@@ -49,6 +192,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -56,6 +200,7 @@ export const charts = [
                 splitNumber: 2,
                 minInterval: 50,
                 axisLabel: {
+                  margin: 10,
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
@@ -66,6 +211,10 @@ export const charts = [
                 {
                   type: 'line',
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -150,6 +299,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -160,6 +310,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -167,10 +318,18 @@ export const charts = [
                 {
                   type: 'line',
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -296,6 +455,7 @@ export const charts = [
                 data: [],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -304,6 +464,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -313,6 +474,10 @@ export const charts = [
                 {
                   type: 'line',
                   data: [],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -363,6 +528,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -373,6 +539,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -381,6 +548,10 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -465,6 +636,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -475,6 +647,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -483,11 +656,19 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   smooth: true,
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -614,6 +795,7 @@ export const charts = [
                 data: [],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -624,6 +806,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -632,6 +815,10 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -682,6 +869,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -692,6 +880,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -700,6 +889,10 @@ export const charts = [
                   type: 'line',
                   step: 'start',
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -790,6 +983,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -798,6 +992,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -809,6 +1004,10 @@ export const charts = [
                   data: [40, 20, 90, 60, 70, 80],
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -893,6 +1092,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -901,6 +1101,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -912,12 +1113,20 @@ export const charts = [
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -1051,6 +1260,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1061,6 +1271,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1107,6 +1318,10 @@ export const charts = [
                       },
                     },
                   ],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -1239,6 +1454,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1247,6 +1463,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1386,6 +1603,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1394,6 +1612,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1542,6 +1761,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               xAxis: {
@@ -1552,6 +1772,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1793,6 +2014,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                 },
               },
               xAxis: {
@@ -1803,6 +2025,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1944,6 +2167,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                 },
               },
               xAxis: {
@@ -1954,6 +2178,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -2151,6 +2376,10 @@ export const charts = [
                       },
                     },
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2238,6 +2467,10 @@ export const charts = [
                       },
                     },
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2329,6 +2562,10 @@ export const charts = [
                     borderRadius: 4,
                     borderWidth: 1,
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2919,6 +3156,7 @@ export const charts = [
                 {
                   type: 'graph',
                   layout: 'force',
+                  zoom: 1,
                   data: [
                     {
                       id: '0',
@@ -3119,6 +3357,7 @@ export const charts = [
                   type: 'graph',
                   symbolSize: 58,
                   layout: 'force',
+                  zoom: 1,
                   data: [
                     {
                       name: '操作系统',
@@ -3163,54 +3402,83 @@ export const charts = [
                       source: '浏览器',
                       target: '操作系统',
                       name: '包含',
-                      lineStyle: { color: '#4583ff' },
+                      label: {
+                        fontSize: 12
+                      },
+                      lineStyle: {
+                        color: '#4583ff'
+                      },
                     },
                     {
                       source: 'HTML',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'CSS',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'JavaScript',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Chrome',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'IE',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Firefox',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Safari',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Chrome',
                       target: 'JavaScript',
                       name: '关联',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                   ],
@@ -3227,8 +3495,10 @@ export const charts = [
                   ],
                   roam: true,
                   edgeSymbol: ['', 'arrow'],
+                  edgeSymbolSize: 10,
                   label: {
                     show: true,
+                    fontSize: 16
                   },
                   edgeLabel: {
                     normal: {
@@ -3300,6 +3570,8 @@ export const charts = [
                 emphasis: {
                   focus: 'adjacency',
                 },
+                nodeWidth: 20,
+                nodeGap: 8,
                 data: [
                   {
                     name: 'a',
@@ -3453,7 +3725,8 @@ export const charts = [
                   opacity: 0.45,
                   curveness: 0.5,
                 },
-
+                nodeWidth: 20,
+                nodeGap: 8,
                 label: {
                   color: '#fff',
                   fontSize: 10,
@@ -3970,6 +4243,7 @@ export const charts = [
                   },
                   axisTick: {
                     distance: 4,
+                    length: 8,
                     lineStyle: {
                       color: '#6B9DD7',
                     },
@@ -3993,11 +4267,14 @@ export const charts = [
                   axisLabel: {
                     color: '#ddd',
                     fontSize: 12,
+                    distance: 15
                   },
                   itemStyle: {
                     color: '#0c56eb',
                   },
                   pointer: {
+                    length: 100,
+                    width: 6,
                     itemStyle: {
                       borderWidth: 0,
                     },
@@ -4417,6 +4694,7 @@ export const charts = [
                   },
                   progress: {
                     show: true,
+                    width: 10
                   },
                   detail: {
                     offsetCenter: [0, 50],
@@ -4517,13 +4795,13 @@ export const charts = [
                   },
                   progress: {
                     show: true,
+                    width: 10
                   },
                   detail: {
                     offsetCenter: [0, 50],
                     textStyle: {
                       padding: [0, 0, 0, 0],
-                      fontSize: 18,
-                      fontWeight: '700',
+                      fontSize: 20,
                       color: '#0c56eb',
                     },
                     fontSize: 12,
@@ -4757,9 +5035,12 @@ export const charts = [
               tooltip: {},
               geo: {
                 map: 'china',
-                zoom: 1.6,
+                zoom: '1.6',
+                scaleLimit:{
+                  min: 1.6,
+                  max: 1.6
+                },
                 center: [105, 35],
-
                 label: {
                   normal: {
                     show: false,
@@ -4800,6 +5081,7 @@ export const charts = [
                     show: true,
                     formatter: '{b}',
                     position: 'bottom',
+                    fontSize: 12,
                     color: 'yellow',
                     offset: [0, 4],
                   },
@@ -4831,6 +5113,7 @@ export const charts = [
                     show: true,
                     formatter: '{b}',
                     position: 'bottom',
+                    fontSize: 12,
                     color: '#36cfc9',
                     offset: [0, -2],
                   },
@@ -4914,6 +5197,10 @@ export const charts = [
               geo: {
                 map: 'hubei',
                 zoom: 1.2,
+                scaleLimit:{
+                  min: 1.2,
+                  max: 1.2
+                },
                 label: {
                   normal: {
                     show: false,
@@ -5029,6 +5316,7 @@ export const charts = [
                   animation: false,
                   label: {
                     normal: {
+                      fontSize: 12,
                       show: true,
                       formatter: '{b}',
                       color: '#fff',
@@ -5092,8 +5380,13 @@ export const charts = [
               geo: {
                 map: 'china',
                 zoom: 1.6,
+                scaleLimit:{
+                  min: 1.6,
+                  max: 1.6
+                },
                 center: [105, 35],
                 label: {
+                  fontSize: 12,
                   normal: {
                     show: true,
                     fontSize: 10,