2.1.3 大屏版本发布

2025-12-23 14:26:39 +08:00 · 2019-12-25 13:25:10 +08:00
parent ea5ef384f2
commit 9c44ffaa8e
60 changed files with 2970 additions and 806 deletions
--- a/ant-design-vue-jeecg/src/components/chart/BarAndLine.vue
+++ b/ant-design-vue-jeecg/src/components/chart/BarAndLine.vue
@ -1,7 +1,7 @@
 <template>
-  <div :style="{ padding: '0 0 32px 32px' }">
+  <div :style="{ padding: '0 50px 32px 0' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding">
      <v-tooltip/>
      <v-legend/>
      <v-axis/>
@ -23,13 +23,13 @@
      dataSource: {
        type: Array,
        default: () => [
-          { type: '10:10', bar: 2, line: 2 },
-          { type: '10:15', bar: 6, line: 3 },
-          { type: '10:20', bar: 2, line: 5 },
-          { type: '10:25', bar: 9, line: 1 },
-          { type: '10:30', bar: 2, line: 3 },
-          { type: '10:35', bar: 2, line: 1 },
-          { type: '10:40', bar: 1, line: 2 }
+          { type: '10:10', bar: 200, line: 1000 },
+          { type: '10:15', bar: 600, line: 1000},
+          { type: '10:20', bar: 200, line: 1000},
+          { type: '10:25', bar: 900, line: 1000},
+          { type: '10:30', bar: 200, line: 1000},
+          { type: '10:35', bar: 200, line: 1000},
+          { type: '10:40', bar: 100, line: 1000}
        ]
      },
      height: {
@ -39,6 +39,7 @@
    },
    data() {
      return {
+        padding: { top:50, right:50, bottom:100, left:50 },
        scale: [{
          dataKey: 'bar',
          min: 0
--- a/ant-design-vue-jeecg/src/components/chart/BarMultid.vue
+++ b/ant-design-vue-jeecg/src/components/chart/BarMultid.vue
@ -1,7 +1,7 @@
 <template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart :forceFit="true" :height="height" :data="data">
+    <v-chart :forceFit="true" :height="254" :data="chartData" :padding="['auto', 'auto', '40', '50']">
      <v-tooltip />
      <v-axis />
      <v-legend />
@ -13,6 +13,11 @@
 <script>
  import { DataSet } from '@antv/data-set'

+  const sourceDataConst = [
+    { type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
+    { type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 },
+  ];
+  const fieldsConst = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'];
  export default {
    name: 'BarMultid',
    props: {
@ -20,62 +25,47 @@
        type: String,
        default: ''
      },
-      dataSource:{
-        type: Array,
-        default: () => [
-          { type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
-          { type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
-        ]
+      sourceData:{
+        type:Array,
+        default:()=>[]
      },
      fields:{
-        type: Array,
-        default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
-      },
-      // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
-      aliases:{
-        type: Array,
-        default: () => []
-      },
-      height: {
-        type: Number,
-        default: 254
+        type:Array,
+        default:()=>[]
      }
    },
    data() {
      return {
+        chartData:"",
+        height: 400,
        adjust: [{
          type: 'dodge',
-          marginRatio: 1 / 32
-        }]
+          marginRatio: 1 / 32,
+        }],
+      };
+    },
+    watch: {
+      'sourceData': function () {
+        this.drawChart();
      }
    },
-    computed: {
-      data() {
-        const dv = new DataSet.View().source(this.dataSource)
+    mounted(){
+      this.drawChart()
+    },
+    methods:{
+      drawChart(){
+        let temp = sourceDataConst;
+        if(this.sourceData && this.sourceData.length>0){
+          temp = this.sourceData
+        }
+        const dv = new DataSet.View().source(temp);
        dv.transform({
          type: 'fold',
-          fields: this.fields,
+          fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
          key: 'x',
-          value: 'y'
-        })
-
-        // bar 使用不了 - 和 / 所以替换下
-        let rows = dv.rows.map(row => {
-          if (typeof row.x === 'string') {
-            row.x = row.x.replace(/[-/]/g, '_')
-          }
-          return row
-        })
-        // 替换别名
-        rows.forEach(row => {
-          for (let item of this.aliases) {
-            if (item.field === row.type) {
-              row.type = item.alias
-              break
-            }
-          }
-        })
-        return rows
+          value: 'y',
+        });
+        this.chartData=dv.rows;
      }
    }
  }
--- a/ant-design-vue-jeecg/src/components/chart/DashChartDemo.vue
+++ b/ant-design-vue-jeecg/src/components/chart/DashChartDemo.vue
@ -1,6 +1,6 @@
 <template>
  <div :style="{ padding: '0 0 32px 32px' }">
-    <v-chart :forceFit="true" :height="350" :data="chartData" :scale="scale">
+    <v-chart :forceFit="true" :height="300" :data="chartData" :scale="scale">
      <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
      <v-axis
        dataKey="value"
@ -32,7 +32,7 @@
        type="arc"
        :zIndex="1"
        :start="arcGuide2Start"
-        :end="getArcGuide2End()"
+        :end="getArcGuide2End"
        :vStyle="arcGuide2Style"
      ></v-guide>
      <v-guide
@ -88,7 +88,7 @@
  }];

  const data = [
-    { value: 0},
+    { value: 7.0 },
  ];

  export default {
@ -96,7 +96,7 @@
    props:{
      datasource:{
        type: Number,
-        default:0
+        default:7
      },
      title: {
        type: String,
--- a/ant-design-vue-jeecg/src/components/chart/IndexBar.vue
+++ b/ant-design-vue-jeecg/src/components/chart/IndexBar.vue
@ -0,0 +1,61 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="datasource"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+
+  const data = []
+  for (let i = 0; i < 12; i += 1) {
+    data.push({
+      x: `${i + 1}月`,
+      y: Math.floor(Math.random() * 1000) + 200
+    })
+  }
+  const tooltip = [
+    'x*y',
+    (x, y) => ({
+      name: x,
+      value: y
+    })
+  ]
+  const scale = [{
+    dataKey: 'x',
+    min: 2
+  }, {
+    dataKey: 'y',
+    title: '时间',
+    min: 1,
+    max: 22
+  }]
+
+  export default {
+    name: "Bar",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    mounted(){
+      this.datasource = data
+    },
+    data () {
+      return {
+        datasource:[],
+        scale,
+        tooltip
+      }
+    }
+  }
+</script>