Home Explore Help
Register Sign In
wangcong
/
visualization-design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

ananzhusen 1 year ago
parent
8e0ff75262 5cbd94bf3b
commit
68a37b86c0
3 changed files with 144 additions and 45 deletions
Unified View Show Diff Stats
  1. 1 1
      index.html
  2. 47 33
      src/services/defaults.ts
  3. 96 11
      src/services/echarts.ts

+ 1 - 1
index.html
View File 

@@ -27,7 +27,7 @@
 
       href="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.css"
 
       href="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.css"
 
       rel="stylesheet"
 
       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>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 47 - 33
src/services/defaults.ts
View File 

@@ -1163,8 +1163,9 @@ export const formComponents = [
 
           width: 300,
 
           width: 300,
 
           height: 40,
 
           height: 40,
 
           text: '当前时间',
 
           text: '当前时间',
 
+          lineWidth:0,
 
           timeFormat:
 
           timeFormat:
 
-            '`${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒 星期${week}`',
 
+            '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
 
           props: {
 
           props: {
 
             custom: [
 
             custom: [
 
               {
 
               {
 
@@ -1172,6 +1173,11 @@ export const formComponents = [
 
                 label: '显示格式',
 
                 label: '显示格式',
 
                 type: 'string',
 
                 type: 'string',
 
               },
 
               },
 
+              {
 
+                key: 'borderWidth',
 
+                label: '显示格式',
 
+                type: 'string',
 
+              },
 
             ],
 
             ],
 
           },
 
           },
 
         },
 
         },
 
@@ -1218,23 +1224,28 @@ export const formComponents = [
 
             {
 
             {
 
               label: '2022-01-01',
 
               label: '2022-01-01',
 
               content: '事件一',
 
               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',
 
               // 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',
 
               label: '2022-02-01',
 
               content: '事件二',
 
               content: '事件二',
 
+              circleBg: '#BFDBFF',
 
+              circleShadow:'#4583FF33',
 
+              textColor:'#FFFFFF'
 
             },
 
             },
 
             {
 
             {
 
               label: '2022-03-01',
 
               label: '2022-03-01',
 
               content: '事件三',
 
               content: '事件三',
 
+              textColor:'#FFFFFF66'
 
             },
 
             },
 
             {
 
             {
 
               label: '2022-04-01',
 
               label: '2022-04-01',
 
               content: '事件四',
 
               content: '事件四',
 
+              textColor:'#FFFFFF66'
 
             },
 
             },
 
           ],
 
           ],
 
           text: '时间轴',
 
           text: '时间轴',
 
@@ -1283,23 +1294,28 @@ export const formComponents = [
 
             {
 
             {
 
               label: '2022-01-01',
 
               label: '2022-01-01',
 
               content: '事件一',
 
               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',
 
               // 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',
 
               label: '2022-02-01',
 
               content: '事件二',
 
               content: '事件二',
 
+              circleBg: '#BFDBFF',
 
+              circleShadow:'#4583FF33',
 
+              textColor:'#FFFFFF'
 
             },
 
             },
 
             {
 
             {
 
               label: '2022-03-01',
 
               label: '2022-03-01',
 
               content: '事件三',
 
               content: '事件三',
 
+              textColor:'#FFFFFF66'
 
             },
 
             },
 
             {
 
             {
 
               label: '2022-04-01',
 
               label: '2022-04-01',
 
               content: '事件四',
 
               content: '事件四',
 
+              textColor:'#FFFFFF66'
 
             },
 
             },
 
           ],
 
           ],
 
           props: {
 
           props: {
 
@@ -1628,6 +1644,8 @@ export const formComponents = [
 
           expanded: ['1', '2'],
 
           expanded: ['1', '2'],
 
           fontSize: 20,
 
           fontSize: 20,
 
           disableInput: true,
 
           disableInput: true,
 
+          // iconFamily:'l-icon',
 
+          // icon:'\ue607',
 
           data: [
 
           data: [
 
             {
 
             {
 
               key: '1',
 
               key: '1',
 
@@ -1724,7 +1742,7 @@ export const formComponents = [
 
           data: [
 
           data: [
 
             {
 
             {
 
               type: 'text',
 
               type: 'text',
 
-              color: '',
 
+              color: '#FFFFFFD9',
 
               x: 0,
 
               x: 0,
 
               text: '业务指标',
 
               text: '业务指标',
 
             },
 
             },
 
@@ -1772,12 +1790,12 @@ export const formComponents = [
 
           iconLeft: 8,
 
           iconLeft: 8,
 
           textAlign: 'left',
 
           textAlign: 'left',
 
           color: 'rgba(235, 235, 235, 1)',
 
           color: 'rgba(235, 235, 235, 1)',
 
-          background: 'rgba(255, 255, 255, 1)',
 
+          background: '#272C33',
 
           textLeft: 30,
 
           textLeft: 30,
 
           shadow: false,
 
           shadow: false,
 
-          textColor: 'rgba(0, 0, 0, 1)',
 
+          textColor: '#FFF',
 
           hoverTextColor: 'rgba(0, 0, 0, 1)',
 
           hoverTextColor: 'rgba(0, 0, 0, 1)',
 
-          shadowColor: 'rgba(250, 247, 247, 0.5)',
 
+          shadowColor: '#313740',
 
           shadowOffsetX: 6,
 
           shadowOffsetX: 6,
 
           shadowOffsetY: 6,
 
           shadowOffsetY: 6,
 
           shadowBlur: 20,
 
           shadowBlur: 20,
 
@@ -1804,16 +1822,16 @@ export const formComponents = [
 
           textLeft: 30,
 
           textLeft: 30,
 
           textTop: 30,
 
           textTop: 30,
 
           color: 'rgba(235, 235, 235, 1)',
 
           color: 'rgba(235, 235, 235, 1)',
 
-          background: 'rgba(255, 255, 255, 1)',
 
+          background: '#272C33',
 
           shadow: false,
 
           shadow: false,
 
-          textColor: '#666666',
 
+          textColor: '#FFFFFF99',
 
           hoverTextColor: '#666666',
 
           hoverTextColor: '#666666',
 
           shadowColor: 'rgba(250, 247, 247, 0.5)',
 
           shadowColor: 'rgba(250, 247, 247, 0.5)',
 
           shadowOffsetX: 6,
 
           shadowOffsetX: 6,
 
           shadowOffsetY: 6,
 
           shadowOffsetY: 6,
 
           shadowBlur: 20,
 
           shadowBlur: 20,
 
           heading: '标题名称',
 
           heading: '标题名称',
 
-          headingColor: '#000',
 
+          headingColor: '#FFF',
 
           headingSize: 16,
 
           headingSize: 16,
 
           // headingWeight: 'bold',
 
           // headingWeight: 'bold',
 
           props: {
 
           props: {
 
@@ -2135,45 +2153,41 @@ export const formComponents = [
 
           height: 60,
 
           height: 60,
 
           externElement: true,
 
           externElement: true,
 
           selectedKeys: ['1'],
 
           selectedKeys: ['1'],
 
-          activeColor: '#4E85E5',
 
+          // activeColor: '#4E85E5',
 
+          iconPosition:'left',
 
           data: [
 
           data: [
 
             {
 
             {
 
               key: '1',
 
               key: '1',
 
-              icon: 't-icon t-align-top',
 
-              title: '平台中心',
 
+              icon: 'l-icon l-user',
 
+              title: '个人中心',
 
               children: [
 
               children: [
 
                 {
 
                 {
 
                   key: '1-1',
 
                   key: '1-1',
 
-                  icon: 't-icon t-align-top',
 
+                  icon: 'l-icon l-fly',
 
                   title: '测试测试',
 
                   title: '测试测试',
 
                 },
 
                 },
 
               ],
 
               ],
 
             },
 
             },
 
             {
 
             {
 
               key: '2',
 
               key: '2',
 
-              icon: 't-icon t-04',
 
+              icon: 'l-icon l-panel',
 
               title: '安全运行',
 
               title: '安全运行',
 
             },
 
             },
 
             {
 
             {
 
               key: '3',
 
               key: '3',
 
-              icon: 't-icon t-warn',
 
+              icon: 'l-icon l-align-center',
 
               title: '智慧能源',
 
               title: '智慧能源',
 
             },
 
             },
 
             {
 
             {
 
               key: '4',
 
               key: '4',
 
-              icon: 't-icon t-line-chart',
 
+              icon: 'l-icon l-kongzhuangtai1',
 
               title: '数据分析',
 
               title: '数据分析',
 
             },
 
             },
 
             {
 
             {
 
               key: '5',
 
               key: '5',
 
-              icon: 't-icon t-pie-chart',
 
+              icon: 'l-icon l-quanjutishi',
 
               title: '运维管理',
 
               title: '运维管理',
 
             },
 
             },
 
-            {
 
-              key: '6',
 
-              icon: 't-icon t-dashboard-chart',
 
-              title: '资产设置',
 
-            },
 
           ],
 
           ],
 
         },
 
         },
 
       },
 
       },
 
@@ -2190,7 +2204,7 @@ export const formComponents = [
 
               title: '实时监测',
 
               title: '实时监测',
 
               key: '0',
 
               key: '0',
 
               show: true,
 
               show: true,
 
-              icon: 't-icon t-10',
 
+              icon: 'l-icon t-10',
 
               children: [
 
               children: [
 
                 {
 
                 {
 
                   title: '站点看板',
 
                   title: '站点看板',
 
@@ -2564,9 +2578,9 @@ export const formComponents = [
 
           textAlign: 'left',
 
           textAlign: 'left',
 
           input: true,
 
           input: true,
 
           color: '#D9D9D9FF',
 
           color: '#D9D9D9FF',
 
-          textColor: '#000000FF',
 
-          hoverTextColor: '#000000FF',
 
-          activeTextColor: '#000000FF',
 
+          textColor: '#FFFFFF',
 
+          hoverTextColor: '#FFFFFF',
 
+          activeTextColor: '#FFFFFF',
 
           textLeft: 10,
 
           textLeft: 10,
 
           dropdownList: [
 
           dropdownList: [
 
             {
 
             {

+ 96 - 11
src/services/echarts.ts
View File 

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