Merge branch 'local' of https://github.com/le5le-com/visualization-design into local

src/services/echarts.ts

@@ -1759,7 +1759,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
-              barWidth: '20%',
+              barWidth: 10,
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1767,15 +1767,37 @@ export const charts = [
                 top: 12,
                 containLabel: true,
               },
+              tooltip:{
+                trigger:'item',
+                backgroundColor: '#242424',
+                borderColor:'#242424',
+              },
               fontSize: 10,
-              xAxis: {
+              xAxis:[ {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
                   margin: 10
                 },
-              },
+                axisTick:{
+                  show:false
+                },
+              }, {
+                type: 'category',
+                show: false,
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin: 10,
+                  color:'rgba(255,255,255,0.7)',
+                },
+                axisTick:{
+                  show:false
+                },
+              }],
               yAxis: {
                 type: 'value',
                 max: 100,
@@ -1796,46 +1818,51 @@ export const charts = [
                   data: [
                     {
                       value: 40,
-                      itemStyle: {
-                        color: '#6851f1',
-                      },
                     },
                     {
                       value: 20,
-                      itemStyle: {
-                        color: '#09bcb7',
-                      },
                     },
                     {
                       value: 90,
-                      itemStyle: {
-                        color: '#f5804d',
-                      },
                     },
                     {
                       value: 60,
-                      itemStyle: {
-                        color: '#0c56eb',
-                      },
                     },
                     {
                       value: 70,
-                      itemStyle: {
-                        color: '#6851f1',
-                      },
                     },
                     {
                       value: 80,
-                      itemStyle: {
-                        color: '#09bcb7',
-                      },
                     },
                   ],
+                  itemStyle:{
+                    color:'#4583ff'
+                  },
                   lineStyle:{
                     width: 2
                   },
                   symbolSize: 5,
                 },
+                {
+                  xAxisIndex: 1,
+                  itemStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)',
+                    opacity: 0
+                  },
+                  tooltip:{
+                    show: false,
+
+                  },
+                  data: [100,100,100,100,100,100],
+                  barWidth: 30,
+                  emphasis: {
+                    itemStyle: {
+                      color: 'rgba(255,255,255,0.05)',
+                      opacity: 1
+                    },
+                  },
+                  type: 'bar'
+                }
               ],
             },
             max: 100,
@@ -1847,54 +1874,6 @@ export const charts = [
               type: 'float',
               enableMock: true,
               mock: '10-40',
-              triggers: [
-                {
-                  name: '触发器1',
-                  conditionType: 'and',
-                  conditions: [
-                    {
-                      type: '',
-                      operator: '>',
-                      valueType: '',
-                      value: '20',
-                    },
-                  ],
-                  actions: [
-                    {
-                      action: 1,
-                      params: '',
-                      value: {
-                        'echarts.option.series.0.data.0.itemStyle.color':
-                          '#ff4000',
-                      },
-                      targetType: 'id',
-                    },
-                  ],
-                },
-                {
-                  name: '触发器2',
-                  conditionType: 'and',
-                  conditions: [
-                    {
-                      type: '',
-                      operator: '<=',
-                      valueType: '',
-                      value: '20',
-                    },
-                  ],
-                  actions: [
-                    {
-                      action: 1,
-                      params: '',
-                      value: {
-                        'echarts.option.series.0.data.0.itemStyle.color':
-                          '#6851f1',
-                      },
-                      targetType: 'id',
-                    },
-                  ],
-                },
-              ],
             },
             {
               key: 'echarts.option.series.0.data.1.value',
@@ -1954,7 +1933,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
-              barWidth: '20%',
+              barWidth: '10',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1967,8 +1946,14 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
-                  margin: 10
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin: 10,
+                  color:'rgba(255,255,255,0.7)',
                 },
+                axisTick:{
+                  show: false
+                }
               },
               yAxis: {
                 type: 'value',
@@ -1986,6 +1971,7 @@ export const charts = [
                 {
                   type: 'bar',
                   data: [40, 35, 80, 40, 45, 25],
+                  barGap:'100%'
                 },
                 {
                   type: 'bar',
@@ -2103,7 +2089,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
-              barWidth: '20%',
+              barWidth: '10',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -2116,8 +2102,14 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
-                  margin: 10
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin: 10,
+                  color:'rgba(255,255,255,0.7)',
                 },
+                axisTick:{
+                  show: false
+                }
               },
               yAxis: {
                 type: 'value',
@@ -5200,6 +5192,7 @@ export const charts = [
                   },
                   splitLine: {
                     distance: 4,
+                    length: 10,
                     lineStyle: {
                       width: 2,
                       color: 'rgb(107,157,215)',
@@ -5310,8 +5303,7 @@ export const charts = [
                   detail: {
                     color: '#ACCFFF',
                     fontSize: 16,
-                    fontWeight: 400,
-                    offsetCenter: [0, '24%'],
+                    offsetCenter: [0,50],
                   },
                   data: [{ value: 60 }],
                   pointer: {
@@ -5636,6 +5628,7 @@ export const charts = [
                     length: 16,
                     lineStyle: {
                       color: '#468EFD',
+                      width:3
                     },
                   },
                   itemStyle: {
@@ -5650,11 +5643,9 @@ export const charts = [
                     offsetCenter: [0, 50],
                     textStyle: {
                       padding: [0, 0, 0, 0],
-                      fontSize: 18,
-                      fontWeight: '700',
+                      fontSize: 20,
                       color: '#0c56eb',
                     },
-                    fontSize: 16,
                   },
 
                   data: [
@@ -5663,7 +5654,7 @@ export const charts = [
                     },
                   ],
                   pointer: {
-                    length: '75%',
+                    show: true,
                     radius: '20%',
                     width: 5,
                     itemStyle: {
@@ -5737,6 +5728,7 @@ export const charts = [
                     length: 16,
                     lineStyle: {
                       color: '#468EFD',
+                      width: 3
                     },
                   },
                   itemStyle: {
@@ -5754,7 +5746,6 @@ export const charts = [
                       fontSize: 20,
                       color: '#0c56eb',
                     },
-                    fontSize: 12,
                   },
                   data: [
                     {
@@ -5762,7 +5753,6 @@ export const charts = [
                     },
                   ],
                   pointer: {
-                    length: '75%',
                     radius: '20%',
                     width: 5,
                     itemStyle: {
@@ -5843,7 +5833,6 @@ export const charts = [
                     offsetCenter: [0, 2],
                     textStyle: {
                       fontSize: 16,
-                      fontWeight: 400,
                       color: '#EDFFFD',
                     },
                     fontSize: 16,
@@ -5899,7 +5888,6 @@ export const charts = [
                     show: false,
                   },
                   pointer: {
-                    length: '100%',
                     radius: '20%',
                     width: 3,
                     itemStyle: {
@@ -5981,6 +5969,7 @@ export const charts = [
           echarts: {
             geoName: 'china',
             geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json',
+            openShadow: true,
             option: {
               tooltip: {},
               geo: {
@@ -6000,19 +5989,92 @@ export const charts = [
                   },
                 },
                 // 地图区域的样式设置
+                // itemStyle: {
+                //   normal: {
+                //     borderColor: 'rgba(26,82,231, 1)',
+                //     borderWidth: 1,
+                //     areaColor: 'rgba(7, 52, 126, 0.3)',
+                //     shadowColor: '#0ff',
+                //     shadowBlur: 10,
+                //     shadowOffsetX: 0,
+                //     shadowOffsetY: 0,
+                //   },
+                //   emphasis: {
+                //     areaColor: '#1677ff80',
+                //     borderColor: '#1677ff',
+                //   },
+                // },
                 itemStyle: {
                   normal: {
-                    borderColor: 'rgba(26,82,231, 1)',
-                    borderWidth: 1,
-                    areaColor: 'rgba(7, 52, 126, 0.3)',
+                    areaColor: 'rgba(0, 15, 40, 0.5)',
+                    shadowColor: 'rgba(0, 0, 0, 1)',
+                    shadowBlur: 0,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 10,
+                    borderColor: 'rgba(0, 0, 0, 0.7)',
+                    borderWidth: 0.5,
                   },
                   emphasis: {
-                    areaColor: '#1677ff80',
-                    borderColor: '#1677ff',
+                    areaColor: '#2AB8FF',
+                    borderWidth: 1,
+                    color: 'green',
+                    label: {
+                      show: false,
+                    },
                   },
                 },
               },
               series: [
+                {
+                  type: 'map',
+                  roam: false,
+                  center: [105, 35],
+                  layoutSize: '100%',
+                  label: {
+                    normal: {
+                      show: false,
+                      textStyle: {
+                        color: '#fff',
+                      },
+                    },
+                    emphasis: {
+                      textStyle: {
+                        color: '#fff',
+                      },
+                    },
+                  },
+                  itemStyle: {
+                    normal: {
+                      borderColor: 'rgb(65,111,232)',
+                      // borderColor:'rgba(26,82,231, 1)',
+                      borderWidth: 1,
+                      areaColor:'rgba(14,82,192,0.58)',
+                      // areaColor: 'rgba(7, 52, 126, 0.3)',
+                      shadowColor: 'rgba(0, 0, 0, 0.5)',
+                      shadowBlur: 0,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                    },
+                    emphasis: {
+                      areaColor: '#1677ff80',
+                      borderColor: '#2ab8ff',
+                      borderWidth: 1,
+                      shadowColor: 'rgba(0, 255, 255, 0.7)',
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                      label: {
+                        show: false,
+                      },
+                    },
+                  },
+                  zoom: 1.6,
+                  scaleLimit:{
+                    min: 1.6,
+                    max: 1.6
+                  },
+                  map: 'china',
+                },
                 {
                   name: '涟漪散点',
                   tooltip: {
@@ -6042,7 +6104,7 @@ export const charts = [
                       shadowColor: 'yellow',
                     },
                   },
-                  zlevel: 1,
+                  zlevel: 1
                 },
                 {
                   name: '散点',
@@ -6110,15 +6172,6 @@ export const charts = [
               ],
             },
           },
-          realTimes: [
-            {
-              key: 'echarts.option.series.2.data.0.name',
-              label: '武汉',
-              type: 'integer',
-              enableMock: true,
-              mock: '100-150',
-            },
-          ],
           props: {
             custom: [
               {
@@ -6126,6 +6179,11 @@ export const charts = [
                 label: 'echarts配置',
                 type: 'code',
               },
+              {
+                label:'阴影',
+                type:'switch',
+                key: 'echarts.openShadow'
+              }
             ],
           },
         },
@@ -6643,12 +6701,8 @@ export const charts = [
           height: 200,
           chartsColor: [
             '#1890ff',
-            '#2FC25B',
-            '#FACC14',
-            '#c23531',
-            '#2f4554',
-            '#61a0a8',
-            '#d48265',
+            '#4583FF',
+            '#37B3CC'
           ],
           xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           smooth: true,
@@ -6670,12 +6724,8 @@ export const charts = [
           disableAnchor: true,
           chartsColor: [
             '#1890ff',
-            '#2FC25B',
-            '#FACC14',
-            '#c23531',
-            '#2f4554',
-            '#61a0a8',
-            '#d48265',
+            '#4583FF',
+            '#37B3CC'
           ],
           xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           data: [
@@ -6738,9 +6788,9 @@ export const charts = [
           value: 90,
           unit: 'm/s',
           axisLine: [
-            [0.3, '#67e0e3'],
-            [0.7, '#37a2da'],
-            [1, '#fd666d'],
+            [0.3, '#1890ff'],
+            [0.7, '#4583FF'],
+            [1, '#37B3CC'],
           ],
           animateCycle: 1,
           keepAnimateState: 0,
@@ -6763,7 +6813,7 @@ export const charts = [
           max: 12,
           splitNumber: 12,
           background: '#3A3A3A',
-          color: '#C0911F',
+          color: '#1890ff',
         },
       },
       {

src/views/components/PenProps.vue

@@ -989,6 +989,9 @@
                     :step="0.01"
                     @change="changeValue(item.key)"
                   />
+                  <t-switch
+                      v-else-if="item.type === 'switch'"
+                      @change="changeValue(item.key,$event)"/>
                   <t-input
                     class="w-full"
                     v-else
@@ -1302,7 +1305,10 @@ const decimalRound = (val: number) => {
   return Math.round(+val || 0);
 };
 
-const changeValue = (prop: string) => {
+const changeValue = (prop: string,eventData = undefined) => {
+  if(eventData){
+    data.pen[prop] = eventData
+  }
   updatePen(data.pen, prop);
 };