Alsmile 1 년 전
부모
커밋
affad588f7
2개의 변경된 파일77개의 추가작업 그리고 299개의 파일을 삭제
  1. 1 1
      index.html
  2. 76 298
      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>

+ 76 - 298
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',
@@ -3724,9 +3721,6 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   name: '最外部进度条',
@@ -3735,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,
@@ -3786,7 +3757,6 @@ export const charts = [
                   axisLabel: {
                     show: false,
                   },
-
                   itemStyle: {
                     show: false,
                   },
@@ -3796,9 +3766,6 @@ export const charts = [
                     fontWeight: 400,
                     offsetCenter: [0, '24%'],
                   },
-                  title: {
-                    show: false,
-                  },
                   data: [{ value: 60 }],
                   pointer: {
                     length: '40%',
@@ -3809,7 +3776,6 @@ export const charts = [
                       borderWidth: 0,
                     },
                   },
-                  animationDuration: 4000,
                 },
                 {
                   name: '指针上的圆',
@@ -3961,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,
@@ -4010,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,
                     },
                   },
@@ -4060,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],
@@ -4072,9 +4009,6 @@ export const charts = [
                       color: '#468EFD',
                     },
                   },
-                  title: {
-                    show: false,
-                  },
                   data: [
                     {
                       value: 36,
@@ -4083,7 +4017,6 @@ export const charts = [
                   pointer: {
                     width: 3,
                     itemStyle: {
-                      color: 'auto',
                       borderWidth: 0,
                     },
                   },
@@ -4099,26 +4032,6 @@ export const charts = [
               type: 'integer',
               enableMock: true,
               mock: '30-80',
-              triggers: [
-                {
-                  name: '触发器1',
-                  conditionType: 'and',
-                  conditions: [
-                    { type: '', operator: '!=', valueType: '', value: '-1' },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      params: '',
-                      value:
-                        "meta2d.setValue({id:pen.id,'echarts.option.series.1.axisLine.lineStyle.color.0.0': pen.echarts.option.series.1.data.0.value/100});",
-                      targetType: 'id',
-                      props: [],
-                      input: '',
-                    },
-                  ],
-                },
-              ],
             },
           ],
           props: {
@@ -4144,9 +4057,6 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   type: 'gauge',
@@ -4154,10 +4064,7 @@ export const charts = [
                   splitNumber: 10,
                   axisLine: {
                     lineStyle: {
-                      color: [
-                        [0.58, '#468EFD'],
-                        [1, 'rgba(107,157,215,.25)'],
-                      ],
+                      color: [[1, 'rgba(107,157,215,.25)']],
                       width: 8,
                     },
                   },
@@ -4183,6 +4090,10 @@ export const charts = [
                   },
                   itemStyle: {
                     show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
                   },
                   detail: {
                     offsetCenter: [0, 50],
@@ -4190,7 +4101,7 @@ export const charts = [
                       padding: [0, 0, 0, 0],
                       fontSize: 18,
                       fontWeight: '700',
-                      color: '#468EFD',
+                      color: '#0c56eb',
                     },
                   },
 
@@ -4207,7 +4118,6 @@ export const charts = [
                       borderWidth: 0,
                     },
                   },
-                  animationDuration: 4000,
                 },
               ],
             },
@@ -4220,26 +4130,6 @@ export const charts = [
               type: 'integer',
               enableMock: true,
               mock: '30-80',
-              triggers: [
-                {
-                  name: '触发器1',
-                  conditionType: 'and',
-                  conditions: [
-                    { type: '', operator: '!=', valueType: '', value: '-1' },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      params: '',
-                      value:
-                        "meta2d.setValue({id:pen.id,'echarts.option.series.0.axisLine.lineStyle.color.0.0': pen.echarts.option.series.0.data.0.value/100});",
-                      targetType: 'id',
-                      props: [],
-                      input: '',
-                    },
-                  ],
-                },
-              ],
             },
           ],
           props: {
@@ -4265,9 +4155,6 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   type: 'gauge',
@@ -4275,10 +4162,7 @@ export const charts = [
                   splitNumber: 10,
                   axisLine: {
                     lineStyle: {
-                      color: [
-                        [0.58, '#468EFD'],
-                        [1, 'rgba(107,157,215,.25)'],
-                      ],
+                      color: [[1, 'rgba(107,157,215,.25)']],
                       width: 8,
                     },
                   },
@@ -4304,6 +4188,10 @@ export const charts = [
                   },
                   itemStyle: {
                     show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
                   },
                   detail: {
                     offsetCenter: [0, 50],
@@ -4311,7 +4199,7 @@ export const charts = [
                       padding: [0, 0, 0, 0],
                       fontSize: 18,
                       fontWeight: '700',
-                      color: '#468EFD',
+                      color: '#0c56eb',
                     },
                   },
                   data: [
@@ -4327,7 +4215,6 @@ export const charts = [
                       borderWidth: 0,
                     },
                   },
-                  animationDuration: 4000,
                 },
               ],
             },
@@ -4340,26 +4227,6 @@ export const charts = [
               type: 'integer',
               enableMock: true,
               mock: '30-80',
-              triggers: [
-                {
-                  name: '触发器1',
-                  conditionType: 'and',
-                  conditions: [
-                    { type: '', operator: '!=', valueType: '', value: '-1' },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      params: '',
-                      value:
-                        "meta2d.setValue({id:pen.id,'echarts.option.series.0.axisLine.lineStyle.color.0.0': pen.echarts.option.series.0.data.0.value/100});",
-                      targetType: 'id',
-                      props: [],
-                      input: '',
-                    },
-                  ],
-                },
-              ],
             },
           ],
           props: {
@@ -4385,45 +4252,15 @@ export const charts = [
           echarts: {
             option: {
               fontSize: 10,
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
-              },
               series: [
                 {
                   name: '最外部进度条',
                   type: 'gauge',
-                  radius: '99%',
-                  z: 6,
+                  radius: '100%',
+                  z: 3,
                   axisLine: {
                     lineStyle: {
-                      color: [
-                        [
-                          0.4,
-                          {
-                            colorStops: [
-                              {
-                                offset: 0,
-                                color: 'rgba(145,207,255,0)',
-                              },
-                              {
-                                offset: 0.5,
-                                color: 'rgba(145,207,255,0.2)',
-                              },
-                              {
-                                offset: 1,
-                                color: 'rgba(145,207,255,1)',
-                              },
-                            ],
-                            x: 0,
-                            y: 1,
-                            x2: 0,
-                            y2: 0,
-                            type: 'linear',
-                            global: false,
-                          },
-                        ],
-                        [1, 'rgba(28,128,245,.0)'],
-                      ],
+                      color: [[1, 'rgba(28,128,245,0)']],
                       width: 3,
                     },
                   },
@@ -4439,10 +4276,17 @@ export const charts = [
                   pointer: {
                     show: false,
                   },
+                  progress: {
+                    show: true,
+                    width: 5,
+                    itemStyle: {
+                      color: 'rgba(133,165,255,0.3)',
+                      borderWidth: 0,
+                    },
+                  },
                   detail: {
                     offsetCenter: [0, 2],
                     textStyle: {
-                      padding: [0, 0, 0, 0],
                       fontSize: 16,
                       fontWeight: 400,
                       color: '#EDFFFD',
@@ -4453,75 +4297,6 @@ export const charts = [
                       value: 40,
                     },
                   ],
-                  animationDuration: 4000,
-                },
-                {
-                  name: '半透明仪表盘',
-                  type: 'gauge',
-                  radius: '80%',
-                  z: 4,
-                  splitNumber: 10,
-                  axisLine: {
-                    lineStyle: {
-                      color: [
-                        [
-                          0.4,
-                          {
-                            colorStops: [
-                              {
-                                offset: 0,
-                                color: 'rgba(145,207,255,0)',
-                              },
-                              {
-                                offset: 0.5,
-                                color: 'rgba(145,207,255,0.1)',
-                              },
-                              {
-                                offset: 1,
-                                color: 'rgba(145,207,255,0.3)',
-                              },
-                            ],
-                            x: 0,
-                            y: 1,
-                            x2: 0,
-                            y2: 0,
-                            type: 'linear',
-                            global: false,
-                          },
-                        ],
-                        [1, 'rgba(28,128,245,.0)'],
-                      ],
-                      width: 60,
-                    },
-                  },
-                  axisLabel: {
-                    show: false,
-                  },
-                  axisTick: {
-                    show: false,
-                  },
-                  splitLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    show: false,
-                  },
-                  detail: {
-                    show: false,
-                  },
-                  data: [
-                    {
-                      value: 40,
-                    },
-                  ],
-                  pointer: {
-                    length: '100%',
-                    radius: '20%',
-                    width: 3,
-                    itemStyle: {
-                      borderWidth: 0,
-                    },
-                  },
                 },
                 {
                   name: '刻度线',
@@ -4531,7 +4306,7 @@ export const charts = [
                   axisLine: {
                     lineStyle: {
                       color: [[1, '#0063E7']],
-                      width: 3,
+                      width: -3,
                     },
                   },
                   axisLabel: {
@@ -4556,32 +4331,37 @@ export const charts = [
                       width: 2,
                     },
                   },
+                  progress: {
+                    show: true,
+                    width: 60,
+                    itemStyle: {
+                      color: 'rgba(145,207,255,0.12)',
+                      borderWidth: 0,
+                    },
+                  },
                   detail: {
                     show: false,
                   },
                   pointer: {
-                    show: false,
-                  },
-                },
-                {
-                  name: '指针上的圆',
-                  type: 'pie',
-                  z: 5,
-                  radius: ['0%', '20%'],
-                  center: ['50%', '50%'],
-                  label: {
-                    show: false,
+                    length: '100%',
+                    radius: '20%',
+                    width: 3,
+                    itemStyle: {
+                      borderWidth: 0,
+                      color: 'rgba(69,131,255,0.3)',
+                    },
                   },
-                  labelLine: {
-                    show: false,
+                  anchor: {
+                    show: true,
+                    showAbove: true,
+                    size: 50,
+                    itemStyle: {
+                      color: 'rgb(42,65,111)',
+                    },
                   },
                   data: [
                     {
-                      value: 100,
-                      itemStyle: {
-                        color: 'rgb(14,31,73)',
-                        borderWidth: 0,
-                      },
+                      value: 40,
                     },
                   ],
                 },
@@ -4591,7 +4371,7 @@ export const charts = [
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data.0.value',
+              key: 'echarts.option.series.1.data.0.value',
               label: '值',
               type: 'integer',
               enableMock: true,
@@ -4600,15 +4380,13 @@ export const charts = [
                 {
                   name: '触发器1',
                   conditionType: 'and',
-                  conditions: [
-                    { type: '', operator: '!=', valueType: '', value: '-1' },
-                  ],
+                  conditions: [],
                   actions: [
                     {
                       action: 5,
                       params: '',
                       value:
-                        "let v = pen.echarts.option.series.0.data.0.value;meta2d.setValue({id:pen.id,'echarts.option.series.0.axisLine.lineStyle.color.0.0':v/100,'echarts.option.series.1.axisLine.lineStyle.color.0.0':v/100,'echarts.option.series.1.data.0.value':v});",
+                        "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: '',