Bladeren bron

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

ananzhusen 1 jaar geleden
bovenliggende
commit
604c8f37c5
2 gewijzigde bestanden met toevoegingen van 396 en 116 verwijderingen
  1. 1 1
      index.html
  2. 395 115
      src/services/echarts.ts

+ 1 - 1
index.html

@@ -27,7 +27,7 @@
       href="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.css"
       rel="stylesheet"
     />
-    <script src="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_agdzdeo1jx9.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 395 - 115
src/services/echarts.ts

@@ -253,7 +253,7 @@ export const charts = [
       },
       {
         name: '折线趋势图',
-        icon: 'l-line-chart',
+        icon: 'l-zhexiantuqushitu',
         data: {
           name: 'echarts',
           width: 366,
@@ -309,7 +309,7 @@ export const charts = [
       },
       {
         name: '基础曲线图',
-        icon: 'l-line-chart',
+        icon: 'l-quxian',
         data: {
           name: 'echarts',
           width: 366,
@@ -595,7 +595,7 @@ export const charts = [
       },
       {
         name: '阶梯折线图',
-        icon: 'l-line-chart',
+        icon: 'l-jietizhexian',
         data: {
           name: 'echarts',
           width: 366,
@@ -692,7 +692,7 @@ export const charts = [
     list: [
       {
         name: '基础面积图',
-        icon: 'l-line-chart',
+        icon: 'l-mianjitu',
         data: {
           name: 'echarts',
           width: 366,
@@ -1022,7 +1022,7 @@ export const charts = [
       },
       {
         name: '分组柱状图',
-        icon: 'l-bar-chart',
+        icon: 'l-a-fenzuzhuzhuangtu',
         data: {
           name: 'echarts',
           width: 366,
@@ -1157,7 +1157,7 @@ export const charts = [
       },
       {
         name: '堆叠柱状图',
-        icon: 'l-bar-chart',
+        icon: 'l-a-duidiezhuzhuangtu',
         data: {
           name: 'echarts',
           width: 366,
@@ -1392,7 +1392,7 @@ export const charts = [
       },
       {
         name: '分组条形图',
-        icon: 'l-bar-chart',
+        icon: 'l-fenzutiaoxingtu',
         data: {
           name: 'echarts',
           width: 366,
@@ -1528,7 +1528,7 @@ export const charts = [
       },
       {
         name: '堆叠条形图',
-        icon: 'l-bar-chart',
+        icon: 'l-duidietiaoxingtu',
         data: {
           name: 'echarts',
           width: 366,
@@ -1940,7 +1940,7 @@ export const charts = [
       },
       {
         name: '环图',
-        icon: 'l-pie-chart',
+        icon: 'l-huanxingtu',
         data: {
           width: 300,
           height: 200,
@@ -2021,7 +2021,7 @@ export const charts = [
       },
       {
         name: '圆角环图',
-        icon: 'l-pie-chart',
+        icon: 'l-yuanjiaohuanxingtu',
         data: {
           width: 300,
           height: 200,
@@ -2230,7 +2230,7 @@ export const charts = [
       },
       {
         name: '涟漪散点图',
-        icon: 'l-sandiantu',
+        icon: 'l-lianyisandiantu',
         data: {
           width: 300,
           height: 200,
@@ -2588,7 +2588,7 @@ export const charts = [
     list: [
       {
         name: '力引导布局',
-        icon: 'l-leidatu',
+        icon: 'l-liyindaobuju',
         data: {
           width: 300,
           height: 300,
@@ -2787,7 +2787,7 @@ export const charts = [
       },
       {
         name: '知识图谱',
-        icon: 'l-leidatu',
+        icon: 'l-zhishitupu',
         data: {
           width: 400,
           height: 400,
@@ -3640,9 +3640,6 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   type: 'gauge',
@@ -3681,6 +3678,11 @@ export const charts = [
                   itemStyle: {
                     color: '#0c56eb',
                   },
+                  pointer: {
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
                   data: [{ value: 70 }],
                 },
               ],
@@ -3708,7 +3710,7 @@ export const charts = [
         },
       },
       {
-        name: '渐变仪表盘',
+        name: '圆盘仪表盘',
         icon: 'l-dashboard-chart',
         data: {
           width: 300,
@@ -3719,9 +3721,6 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   name: '最外部进度条',
@@ -3730,37 +3729,14 @@ export const charts = [
                   splitNumber: 10,
                   axisLine: {
                     lineStyle: {
-                      color: [
-                        [
-                          0.6,
-                          {
-                            colorStops: [
-                              {
-                                offset: 0,
-                                color: '#8D00FF',
-                              },
-                              {
-                                offset: 0.4,
-                                color: '#0EBAFC',
-                              },
-                              {
-                                offset: 1,
-                                color: '#0EBAFC',
-                              },
-                            ],
-                            x: 0,
-                            y: 0,
-                            x2: 1,
-                            y2: 0,
-                            type: 'linear',
-                            global: false,
-                          },
-                        ],
-                        [1, 'rgba(107,157,215,.25)'],
-                      ],
+                      color: [[1, 'rgba(107,157,215,.25)']],
                       width: 8,
                     },
                   },
+                  progress: {
+                    show: true,
+                    width: 8,
+                  },
                   axisTick: {
                     distance: 8,
                     splitNumber: 5,
@@ -3781,7 +3757,6 @@ export const charts = [
                   axisLabel: {
                     show: false,
                   },
-
                   itemStyle: {
                     show: false,
                   },
@@ -3791,9 +3766,6 @@ export const charts = [
                     fontWeight: 400,
                     offsetCenter: [0, '24%'],
                   },
-                  title: {
-                    show: false,
-                  },
                   data: [{ value: 60 }],
                   pointer: {
                     length: '40%',
@@ -3804,7 +3776,6 @@ export const charts = [
                       borderWidth: 0,
                     },
                   },
-                  animationDuration: 4000,
                 },
                 {
                   name: '指针上的圆',
@@ -3898,28 +3869,26 @@ export const charts = [
                     },
                   ],
                   itemStyle: {
-                    normal: {
-                      color: {
-                        colorStops: [
-                          {
-                            offset: 0,
-                            color: '#23A6FF',
-                          },
-                          {
-                            offset: 1,
-                            color: 'rgba(17, 90, 233, 0.21)  ',
-                          },
-                        ],
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        type: 'linear',
-                        global: false,
-                      },
-                      opacity: 0.5,
-                      borderWidth: 0,
+                    color: {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#23A6FF',
+                        },
+                        {
+                          offset: 1,
+                          color: 'rgba(17, 90, 233, 0.21)  ',
+                        },
+                      ],
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: 'linear',
+                      global: false,
                     },
+                    opacity: 0.5,
+                    borderWidth: 0,
                   },
                 },
               ],
@@ -3958,12 +3927,9 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
-                  name: '最外部进度条',
+                  name: '最外部环',
                   type: 'gauge',
                   radius: '96%',
                   splitNumber: 10,
@@ -4007,43 +3973,15 @@ export const charts = [
                   pointer: {
                     show: false,
                   },
-                  animationDuration: 4000,
                 },
                 {
-                  name: '内部进度条',
+                  name: '仪表盘',
                   type: 'gauge',
                   radius: '70%',
                   z: 4,
                   axisLine: {
                     lineStyle: {
-                      color: [
-                        [
-                          0.36,
-                          {
-                            colorStops: [
-                              {
-                                offset: 0,
-                                color: 'rgba(0,191,194,.1)',
-                              },
-                              {
-                                offset: 0.5,
-                                color: 'rgba(0,191,194,0.4)',
-                              },
-                              {
-                                offset: 1,
-                                color: 'rgba(0,191,194,0.8)',
-                              },
-                            ],
-                            x: 0,
-                            y: 1,
-                            x2: 0,
-                            y2: 0,
-                            type: 'linear',
-                            global: false,
-                          },
-                        ],
-                        [1, 'rgba(0,0,0,0)'],
-                      ],
+                      color: [[1, 'rgba(0,0,0,0)']],
                       width: 20,
                     },
                   },
@@ -4057,9 +3995,11 @@ export const charts = [
                     show: false,
                   },
                   itemStyle: {
-                    normal: {
-                      color: 'rgb(46, 143, 255)',
-                    },
+                    color: 'rgba(0,191,194,0.5)',
+                  },
+                  progress: {
+                    width: 20,
+                    show: true,
                   },
                   detail: {
                     offsetCenter: [0, 50],
@@ -4069,21 +4009,361 @@ export const charts = [
                       color: '#468EFD',
                     },
                   },
-                  title: {
+                  data: [
+                    {
+                      value: 36,
+                    },
+                  ],
+                  pointer: {
+                    width: 3,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.1.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技1',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  type: 'gauge',
+                  radius: '98%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#4d5bd1',
+                    distance: 16,
+                  },
+                  axisTick: {
+                    distance: 16,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#468EFD',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: 16,
+                    length: 16,
+                    lineStyle: {
+                      color: '#468EFD',
+                    },
+                  },
+                  itemStyle: {
                     show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
                   },
+                  detail: {
+                    offsetCenter: [0, 50],
+                    textStyle: {
+                      padding: [0, 0, 0, 0],
+                      fontSize: 18,
+                      fontWeight: '700',
+                      color: '#0c56eb',
+                    },
+                  },
+
                   data: [
                     {
-                      value: 36,
+                      value: 58,
                     },
                   ],
                   pointer: {
+                    length: '75%',
+                    radius: '20%',
+                    width: 5,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技2',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  type: 'gauge',
+                  radius: '60%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#4d5bd1',
+                    distance: 16,
+                  },
+                  axisTick: {
+                    distance: -50,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#468EFD',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: -58,
+                    length: 16,
+                    lineStyle: {
+                      color: '#468EFD',
+                    },
+                  },
+                  itemStyle: {
+                    show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
+                  },
+                  detail: {
+                    offsetCenter: [0, 50],
+                    textStyle: {
+                      padding: [0, 0, 0, 0],
+                      fontSize: 18,
+                      fontWeight: '700',
+                      color: '#0c56eb',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 58,
+                    },
+                  ],
+                  pointer: {
+                    length: '75%',
+                    radius: '20%',
+                    width: 5,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技3',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  name: '最外部进度条',
+                  type: 'gauge',
+                  radius: '100%',
+                  z: 3,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(28,128,245,0)']],
+                      width: 3,
+                    },
+                  },
+                  axisLabel: {
+                    show: false,
+                  },
+                  axisTick: {
+                    show: false,
+                  },
+                  splitLine: {
+                    show: false,
+                  },
+                  pointer: {
+                    show: false,
+                  },
+                  progress: {
+                    show: true,
+                    width: 5,
+                    itemStyle: {
+                      color: 'rgba(133,165,255,0.3)',
+                      borderWidth: 0,
+                    },
+                  },
+                  detail: {
+                    offsetCenter: [0, 2],
+                    textStyle: {
+                      fontSize: 16,
+                      fontWeight: 400,
+                      color: '#EDFFFD',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 40,
+                    },
+                  ],
+                },
+                {
+                  name: '刻度线',
+                  type: 'gauge',
+                  radius: '80%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, '#0063E7']],
+                      width: -3,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#69b1ff',
+                    distance: 8,
+                    fontSize: 12,
+                  },
+                  axisTick: {
+                    distance: 6,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#002c8c',
+                      width: 1,
+                    },
+                    length: 4,
+                  },
+                  splitLine: {
+                    distance: 6,
+                    length: 10,
+                    lineStyle: {
+                      color: '#002c8c',
+                      width: 2,
+                    },
+                  },
+                  progress: {
+                    show: true,
+                    width: 60,
+                    itemStyle: {
+                      color: 'rgba(145,207,255,0.12)',
+                      borderWidth: 0,
+                    },
+                  },
+                  detail: {
+                    show: false,
+                  },
+                  pointer: {
+                    length: '100%',
+                    radius: '20%',
                     width: 3,
                     itemStyle: {
-                      color: 'auto',
                       borderWidth: 0,
+                      color: 'rgba(69,131,255,0.3)',
                     },
                   },
+                  anchor: {
+                    show: true,
+                    showAbove: true,
+                    size: 50,
+                    itemStyle: {
+                      color: 'rgb(42,65,111)',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 40,
+                    },
+                  ],
                 },
               ],
             },
@@ -4106,7 +4386,7 @@ export const charts = [
                       action: 5,
                       params: '',
                       value:
-                        "let value =pen.echarts.option.series[1].data[0].value/100;context.meta2d.setValue({id:pen.id,'echarts.option.series.1.axisLine.lineStyle.color.0.0': value},{doEvent:false});",
+                        "let v = pen.echarts.option.series[1].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.0.data.0.value':v},{doEvent:false});",
                       targetType: 'id',
                       props: [],
                       input: '',