feat:大屏echarts组件开发

2 years ago · dfdb1313e7
parent 9ed35ed36b
commit dfdb1313e7
3 changed files with 104 additions and 46 deletions
--- a/data-room-ui/package-lock.json
+++ b/data-room-ui/package-lock.json
@ -3397,27 +3397,6 @@
        "whatwg-fetch": "^3.6.2"
      },
      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.10.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
-          "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
        "acorn-walk": {
          "version": "8.2.0",
          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@ -3489,26 +3468,6 @@
            "tapable": "^2.0.0"
          }
        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
        "ms": {
          "version": "2.1.2",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3726,6 +3685,47 @@
        "lodash": "^4.17.4"
      }
    },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.10.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
+      "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
    "@vue/vue2-jest": {
      "version": "27.0.0",
      "resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",
@ -7545,6 +7545,11 @@
        "minimatch": "^3.0.4"
      }
    },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
+    },
    "duplexer": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -19918,6 +19923,14 @@
        "vue": "^2.2.6"
      }
    },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
    "vue-json-viewer": {
      "version": "2.2.22",
      "resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.22.tgz",
--- a/data-room-ui/packages/BizComponent/config/defaultEchartsConfig.js
+++ b/data-room-ui/packages/BizComponent/config/defaultEchartsConfig.js
@ -120,6 +120,15 @@ const setting = [
    value: '',
    tabName: 'data'
  },
+  {
+    label: '柱形颜色',
+    type: 'colorPicker',
+    field: 'color',
+    optionField: 'color',
+    value: '#007aff',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
  {
    label: 'x轴类型',
    type: 'input',
@ -129,6 +138,33 @@ const setting = [
    tabName: 'custom',
    groupName: 'xAxis'
  },
+  {
+    label: '是否显示标签',
+    type: 'switch',
+    field: 'xAxis_axisLabel_show',
+    optionField: 'xAxis.axisLabel.show',
+    value: true,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签旋转角度',
+    type: 'inputNumber',
+    field: 'xAxis_axisLabel_rotate',
+    optionField: 'xAxis.axisLabel.rotate',
+    value: 0,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签颜色',
+    type: 'colorPicker',
+    field: 'xAxis_axisLabel_color',
+    optionField: 'xAxis.axisLabel.color',
+    value: '#fff',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
  {
    label: 'y轴类型',
    type: 'input',
@ -158,14 +194,19 @@ const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
  data,
-  color: '',
+  //柱状图颜色
+  color: '#007aff',
  appendPadding: [16, 16, 16, 16], // 设置图标的边距
  xField: 'Date',
  yField: 'scales',
-  smooth: true,
  xAxis: {
    type:'category',
-	  data: []
+	  data: [],
+	  axisLabel:{
+	   show:true,
+		color:'#fff',
+		rotate:0
+	  }
   },
  yAxis: {
    type: 'value'
@ -173,7 +214,10 @@ const option = {
  series:[
 	{
 	  data: [],
-	  type:'line'
+	  type: 'bar',
+	  backgroundStyle: {
+       color: '#fff'
+      }
    }
  ]
 }
--- a/data-room-ui/packages/ComponentList/EditForm.vue
+++ b/data-room-ui/packages/ComponentList/EditForm.vue
@ -145,7 +145,7 @@ export default {
  },
  data () {
    return {
-      bizType:'',
+      bizType:'native',
      resolutionRatioValue: '',
      resolutionRatio: {},
      BizList:[
@ -252,6 +252,7 @@ export default {
    closeAddDialog () {
      this.formVisible = false
      this.$refs.dataForm.resetFields()
+      this.bizType='native'
    },
    // 初始化
    init (nodeData, parentCode) {