浏览代码

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

ananzhusen 1 年之前
父节点
当前提交
68a37b86c0
共有 3 个文件被更改,包括 144 次插入45 次删除
  1. 1 1
      index.html
  2. 47 33
      src/services/defaults.ts
  3. 96 11
      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_4dwahu3kqx3.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_8nkauko228g.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 47 - 33
src/services/defaults.ts

@@ -1163,8 +1163,9 @@ export const formComponents = [
           width: 300,
           height: 40,
           text: '当前时间',
+          lineWidth:0,
           timeFormat:
-            '`${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒 星期${week}`',
+            '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
           props: {
             custom: [
               {
@@ -1172,6 +1173,11 @@ export const formComponents = [
                 label: '显示格式',
                 type: 'string',
               },
+              {
+                key: 'borderWidth',
+                label: '显示格式',
+                type: 'string',
+              },
             ],
           },
         },
@@ -1218,23 +1224,28 @@ export const formComponents = [
             {
               label: '2022-01-01',
               content: '事件一',
+              circleBg: '#BFDBFF',
+              circleShadow:'#4583FF33',
+              color:'#BFDBFF',
+              textColor:'#FFFFFF'
               // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
             },
-            {
-              label: '2022-01-01',
-              content: '事件一',
-            },
             {
               label: '2022-02-01',
               content: '事件二',
+              circleBg: '#BFDBFF',
+              circleShadow:'#4583FF33',
+              textColor:'#FFFFFF'
             },
             {
               label: '2022-03-01',
               content: '事件三',
+              textColor:'#FFFFFF66'
             },
             {
               label: '2022-04-01',
               content: '事件四',
+              textColor:'#FFFFFF66'
             },
           ],
           text: '时间轴',
@@ -1283,23 +1294,28 @@ export const formComponents = [
             {
               label: '2022-01-01',
               content: '事件一',
+              circleBg: '#BFDBFF',
+              circleShadow:'#4583FF33',
+              color:'#BFDBFF',
+              textColor:'#FFFFFF'
               // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
             },
-            {
-              label: '2022-01-01',
-              content: '事件一',
-            },
             {
               label: '2022-02-01',
               content: '事件二',
+              circleBg: '#BFDBFF',
+              circleShadow:'#4583FF33',
+              textColor:'#FFFFFF'
             },
             {
               label: '2022-03-01',
               content: '事件三',
+              textColor:'#FFFFFF66'
             },
             {
               label: '2022-04-01',
               content: '事件四',
+              textColor:'#FFFFFF66'
             },
           ],
           props: {
@@ -1628,6 +1644,8 @@ export const formComponents = [
           expanded: ['1', '2'],
           fontSize: 20,
           disableInput: true,
+          // iconFamily:'l-icon',
+          // icon:'\ue607',
           data: [
             {
               key: '1',
@@ -1724,7 +1742,7 @@ export const formComponents = [
           data: [
             {
               type: 'text',
-              color: '',
+              color: '#FFFFFFD9',
               x: 0,
               text: '业务指标',
             },
@@ -1772,12 +1790,12 @@ export const formComponents = [
           iconLeft: 8,
           textAlign: 'left',
           color: 'rgba(235, 235, 235, 1)',
-          background: 'rgba(255, 255, 255, 1)',
+          background: '#272C33',
           textLeft: 30,
           shadow: false,
-          textColor: 'rgba(0, 0, 0, 1)',
+          textColor: '#FFF',
           hoverTextColor: 'rgba(0, 0, 0, 1)',
-          shadowColor: 'rgba(250, 247, 247, 0.5)',
+          shadowColor: '#313740',
           shadowOffsetX: 6,
           shadowOffsetY: 6,
           shadowBlur: 20,
@@ -1804,16 +1822,16 @@ export const formComponents = [
           textLeft: 30,
           textTop: 30,
           color: 'rgba(235, 235, 235, 1)',
-          background: 'rgba(255, 255, 255, 1)',
+          background: '#272C33',
           shadow: false,
-          textColor: '#666666',
+          textColor: '#FFFFFF99',
           hoverTextColor: '#666666',
           shadowColor: 'rgba(250, 247, 247, 0.5)',
           shadowOffsetX: 6,
           shadowOffsetY: 6,
           shadowBlur: 20,
           heading: '标题名称',
-          headingColor: '#000',
+          headingColor: '#FFF',
           headingSize: 16,
           // headingWeight: 'bold',
           props: {
@@ -2135,45 +2153,41 @@ export const formComponents = [
           height: 60,
           externElement: true,
           selectedKeys: ['1'],
-          activeColor: '#4E85E5',
+          // activeColor: '#4E85E5',
+          iconPosition:'left',
           data: [
             {
               key: '1',
-              icon: 't-icon t-align-top',
-              title: '平台中心',
+              icon: 'l-icon l-user',
+              title: '个人中心',
               children: [
                 {
                   key: '1-1',
-                  icon: 't-icon t-align-top',
+                  icon: 'l-icon l-fly',
                   title: '测试测试',
                 },
               ],
             },
             {
               key: '2',
-              icon: 't-icon t-04',
+              icon: 'l-icon l-panel',
               title: '安全运行',
             },
             {
               key: '3',
-              icon: 't-icon t-warn',
+              icon: 'l-icon l-align-center',
               title: '智慧能源',
             },
             {
               key: '4',
-              icon: 't-icon t-line-chart',
+              icon: 'l-icon l-kongzhuangtai1',
               title: '数据分析',
             },
             {
               key: '5',
-              icon: 't-icon t-pie-chart',
+              icon: 'l-icon l-quanjutishi',
               title: '运维管理',
             },
-            {
-              key: '6',
-              icon: 't-icon t-dashboard-chart',
-              title: '资产设置',
-            },
           ],
         },
       },
@@ -2190,7 +2204,7 @@ export const formComponents = [
               title: '实时监测',
               key: '0',
               show: true,
-              icon: 't-icon t-10',
+              icon: 'l-icon t-10',
               children: [
                 {
                   title: '站点看板',
@@ -2564,9 +2578,9 @@ export const formComponents = [
           textAlign: 'left',
           input: true,
           color: '#D9D9D9FF',
-          textColor: '#000000FF',
-          hoverTextColor: '#000000FF',
-          activeTextColor: '#000000FF',
+          textColor: '#FFFFFF',
+          hoverTextColor: '#FFFFFF',
+          activeTextColor: '#FFFFFF',
           textLeft: 10,
           dropdownList: [
             {

+ 96 - 11
src/services/echarts.ts

@@ -959,7 +959,44 @@ export const charts = [
               series: [
                 {
                   type: 'bar',
-                  data: [40, 20, 90, 60, 70, 80],
+                  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',
+                      },
+                    },
+                  ],
                 },
               ],
             },
@@ -967,42 +1004,90 @@ export const charts = [
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data.0',
+              key: 'echarts.option.series.0.data.0.value',
               label: '1月',
               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',
+              key: 'echarts.option.series.0.data.1.value',
               label: '2月',
               type: 'float',
               enableMock: true,
               mock: '0-50',
             },
             {
-              key: 'echarts.option.series.0.data.2',
+              key: 'echarts.option.series.0.data.2.value',
               label: '3月',
               type: 'float',
               enableMock: true,
               mock: '0-50',
             },
             {
-              key: 'echarts.option.series.0.data.3',
+              key: 'echarts.option.series.0.data.3.value',
               label: '4月',
               type: 'float',
               enableMock: true,
               mock: '20-60',
             },
             {
-              key: 'echarts.option.series.0.data.4',
+              key: 'echarts.option.series.0.data.4.value',
               label: '5月',
               type: 'float',
               enableMock: true,
               mock: '0-80',
             },
             {
-              key: 'echarts.option.series.0.data.5',
+              key: 'echarts.option.series.0.data.5.value',
               label: '6月',
               type: 'float',
               enableMock: true,
@@ -3114,7 +3199,7 @@ export const charts = [
       },
       {
         name: '自定义桑基图',
-        icon: 'l-sangshentu',
+        icon: 'l-zidingyisangjitu',
         data: {
           width: 400,
           height: 500,
@@ -4415,7 +4500,7 @@ export const charts = [
     list: [
       {
         name: '中国地图',
-        icon: 'l-line-chart',
+        icon: 'l-earth',
         data: {
           name: 'echarts',
           width: 500,
@@ -4571,7 +4656,7 @@ export const charts = [
       },
       {
         name: '湖北地图',
-        icon: 'l-line-chart',
+        icon: 'l-hubei',
         data: {
           name: 'echarts',
           width: 500,
@@ -4749,7 +4834,7 @@ export const charts = [
       },
       {
         name: '地图·流量',
-        icon: 'l-line-chart',
+        icon: 'l-dituliuliang',
         data: {
           name: 'echarts',
           width: 500,