jeecg-boot 2.0 模块开发版本发布

ant-design-jeecg-vue/src/components/chart/AreaChartTy.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :style="{ padding: '0 0 32px 32px' }">
+  <div :style="{ padding: '0' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
 
     <v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
-      <v-tooltip/>
+      <v-tooltip :shared="false"/>
       <v-axis/>
-      <v-line position="x*y" :size="lineSize"/>
-      <v-area position="x*y"/>
+      <v-line position="x*y" :size="lineSize" :color="lineColor"/>
+      <v-area position="x*y" :color="color"/>
     </v-chart>
 
   </div>
@@ -38,6 +38,16 @@
         type: String,
         default: 'y'
       },
+      // Y轴最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // Y轴最大值
+      max: {
+        type: Number,
+        default: null
+      },
       // 图表高度
       height: {
         type: Number,
@@ -47,13 +57,23 @@
       lineSize: {
         type: Number,
         default: 2
+      },
+      // 面积的颜色
+      color: {
+        type: String,
+        default: ''
+      },
+      // 线的颜色
+      lineColor: {
+        type: String,
+        default: ''
       }
     },
     computed: {
       scale() {
         return [
           { dataKey: 'x', title: this.x, alias: this.x },
-          { dataKey: 'y', title: this.y, alias: this.y }
+          { dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
         ]
       }
     },

ant-design-jeecg-vue/src/components/chart/Bar.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="dataSource" :padding="padding">
+    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
       <v-tooltip/>
       <v-axis/>
       <v-bar position="x*y"/>
@@ -19,6 +19,10 @@
         type: Array,
         required: true
       },
+      yaxisText: {
+        type: String,
+        default: 'y'
+      },
       title: {
         type: String,
         default: ''
@@ -31,6 +35,14 @@
     data() {
       return { padding: ['auto', 'auto', '40', '50'] }
     },
+    computed: {
+      scale() {
+        return [{
+          dataKey: 'y',
+          alias: this.yaxisText
+        }]
+      }
+    },
     mounted() {
       triggerWindowResizeEvent()
     }

ant-design-jeecg-vue/src/components/chart/BarAndLine.vue

@@ -0,0 +1,57 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+      <v-tooltip/>
+      <v-legend/>
+      <v-axis/>
+      <v-bar position="type*bar"/>
+      <v-line position="type*line" color="#2fc25b" :size="3"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'BarMultid',
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      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 }
+        ]
+      },
+      height: {
+        type: Number,
+        default: 400
+      }
+    },
+    data() {
+      return {
+        scale: [{
+          dataKey: 'bar',
+          min: 0
+        }, {
+          dataKey: 'line',
+          min: 0
+        }]
+      }
+    },
+    computed: {
+      data() {
+        return this.dataSource
+      }
+    }
+  }
+</script>

ant-design-jeecg-vue/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" :padding="['auto', 'auto', '40', '50']">
+    <v-chart :forceFit="true" :height="height" :data="data">
       <v-tooltip />
       <v-axis />
       <v-legend />
@@ -13,11 +13,6 @@
 <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: {
@@ -26,12 +21,15 @@
         default: ''
       },
       dataSource:{
-        type:Array,
-        default:()=>[]
+        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 }
+        ]
       },
       fields:{
-        type:Array,
-        default:()=>[]
+        type: Array,
+        default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
       },
       height: {
         type: Number,
@@ -40,35 +38,28 @@
     },
     data() {
       return {
-        data:"",
         adjust: [{
           type: 'dodge',
-          marginRatio: 1 / 32,
-        }],
-      };
-    },
-    watch: {
-      'dataSource': function () {
-        this.drawChart();
+          marginRatio: 1 / 32
+        }]
       }
     },
-    mounted(){
-      this.drawChart()
-    },
-    methods:{
-      drawChart(){
-        let temp = sourceDataConst;
-        if(this.dataSource && this.dataSource.length>0){
-          temp = this.dataSource
-        }
-        const dv = new DataSet.View().source(temp);
+    computed: {
+      data() {
+        const dv = new DataSet.View().source(this.dataSource)
         dv.transform({
           type: 'fold',
-          fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
+          fields: this.fields,
           key: 'x',
-          value: 'y',
-        });
-        this.data=dv.rows;
+          value: 'y'
+        })
+
+        // bar 使用不了 - 和 / 所以替换下
+        return dv.rows.map(row => {
+          row.x = row.x.replace(/[-/]/g, '_')
+          return row
+        })
+
       }
     }
   }

ant-design-jeecg-vue/src/components/chart/DashChartDemo.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
-    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+    <v-chart :forceFit="true" :height="350" :data="chartData" :scale="scale">
       <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
       <v-axis
         dataKey="value"
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-  import {registerShape} from 'viser-vue';
+  import { registerShape } from 'viser-vue';
 
   registerShape('point', 'pointer', {
     draw(cfg, container) {
@@ -87,67 +87,64 @@
     nice: false,
   }];
 
-  const sourceData = [
-    {value: 6.7},
+  const data = [
+    { value: 7.0 },
   ];
 
   export default {
-    name: "DashChartDemo",
-    props: {
-      value: {
+    name:"DashChartDemo",
+    props:{
+      datasource:{
         type: Number,
-        default: 6.7
+        default:7
       },
       title: {
         type: String,
         default: ''
-      },
-      height: {
-        type: Number,
-        default: 254
       }
     },
-    created() {
-      if (!this.value) {
-        this.data = sourceData;
-      } else {
-        this.data = [
-          {value: this.value},
+    created(){
+      if(!this.datasource){
+        this.chartData = data;
+      }else{
+        this.chartData = [
+          { value: this.datasource },
         ];
       }
-      this.getData()
+      this.getChartData()
     },
     watch: {
-      'value': function (val) {
-        this.data = [
-          {value: val},
+      'datasource': function (val) {
+        this.chartData = [
+          { value: val},
         ];
-        this.getData();
+        this.getChartData();
       }
     },
-    methods: {
-      getData() {
-        if (this.data && this.data.length > 0) {
-          this.abcd = this.data[0].value * 10
-        } else {
+    methods:{
+      getChartData(){
+        if(this.chartData && this.chartData.length>0){
+          this.abcd = this.chartData[0].value * 10
+        }else{
           this.abcd = 70
         }
       },
-      getHtmlGuideHtml() {
+      getHtmlGuideHtml(){
         return '<div style="width: 300px;text-align: center;">\n' +
-          '<p style="font-size: 14px;color: #545454;margin: 0;">' + this.title + '</p>\n' +
-          '<p style="font-size: 36px;color: #545454;margin: 0;">' + this.abcd + '%</p>\n' +
+          '<p style="font-size: 14px;color: #545454;margin: 0;">'+this.title+'</p>\n' +
+          '<p style="font-size: 36px;color: #545454;margin: 0;">'+this.abcd+'%</p>\n' +
           '</div>'
       },
-      getArcGuide2End() {
-        return [this.data[0].value, 0.945]
+      getArcGuide2End(){
+        return [this.chartData[0].value, 0.945]
       }
     },
     data() {
       return {
-        data: [],
+        chartData:[],
+        height: 400,
         scale: scale,
-        abcd: 70,
+        abcd:70,
         axisLabel: {
           offset: -16,
           textStyle: {

ant-design-jeecg-vue/src/components/chart/LineChartMultid.vue

@@ -1,12 +1,12 @@
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="['auto', 'auto', '40', '50']">
-      <v-tooltip />
-      <v-axis />
-      <v-legend />
-      <v-line position="type*y" color="x" />
-      <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'" />
+    <v-chart :force-fit="true" :height="height" :data="data" :scale="scale">
+      <v-tooltip/>
+      <v-axis/>
+      <v-legend/>
+      <v-line position="type*y" color="x"/>
+      <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/>
     </v-chart>
   </div>
 </template>
@@ -14,23 +14,6 @@
 <script>
   import { DataSet } from '@antv/data-set'
 
-  const sourceDataConst = [
-    { type: 'Jan', jeecg: 7.0, jeebt: 3.9 },
-    { type: 'Feb', jeecg: 6.9, jeebt: 4.2 },
-    { type: 'Mar', jeecg: 9.5, jeebt: 5.7 },
-    { type: 'Apr', jeecg: 14.5, jeebt: 8.5 },
-    { type: 'May', jeecg: 18.4, jeebt: 11.9 },
-    { type: 'Jun', jeecg: 21.5, jeebt: 15.2 },
-    { type: 'Jul', jeecg: 25.2, jeebt: 17.0 },
-    { type: 'Aug', jeecg: 26.5, jeebt: 16.6 },
-    { type: 'Sep', jeecg: 23.3, jeebt: 14.2 },
-    { type: 'Oct', jeecg: 18.3, jeebt: 10.3 },
-    { type: 'Nov', jeecg: 13.9, jeebt: 6.6 },
-    { type: 'Dec', jeecg: 9.6, jeebt: 4.8 }
-  ];
-
-
-
   export default {
     name: 'LineChartMultid',
     props: {
@@ -38,58 +21,52 @@
         type: String,
         default: ''
       },
-      dataSource:{
-        type:Array,
-        default:()=>[]
+      dataSource: {
+        type: Array,
+        default: () => [
+          { type: 'Jan', jeecg: 7.0, jeebt: 3.9 },
+          { type: 'Feb', jeecg: 6.9, jeebt: 4.2 },
+          { type: 'Mar', jeecg: 9.5, jeebt: 5.7 },
+          { type: 'Apr', jeecg: 14.5, jeebt: 8.5 },
+          { type: 'May', jeecg: 18.4, jeebt: 11.9 },
+          { type: 'Jun', jeecg: 21.5, jeebt: 15.2 },
+          { type: 'Jul', jeecg: 25.2, jeebt: 17.0 },
+          { type: 'Aug', jeecg: 26.5, jeebt: 16.6 },
+          { type: 'Sep', jeecg: 23.3, jeebt: 14.2 },
+          { type: 'Oct', jeecg: 18.3, jeebt: 10.3 },
+          { type: 'Nov', jeecg: 13.9, jeebt: 6.6 },
+          { type: 'Dec', jeecg: 9.6, jeebt: 4.8 }
+        ]
       },
-      fields:{
-        type:Array,
+      fields: {
+        type: Array,
         default: () => ['jeecg', 'jeebt']
       },
-      height:{
-        type:Number,
-        default:254
+      height: {
+        type: Number,
+        default: 254
       }
     },
     data() {
       return {
-        data:"",
         scale: [{
           dataKey: 'x',
           min: 0,
           max: 1
         }],
-        style: { stroke: '#fff', lineWidth: 1 },
-      };
-    },
-    watch: {
-      'dataSource': function () {
-        this.drawChart();
+        style: { stroke: '#fff', lineWidth: 1 }
       }
     },
-    mounted(){
-      this.drawChart()
-    },
-    methods:{
-      drawChart(){
-        let temp = sourceDataConst;
-        if (this.dataSource && this.dataSource.length > 0) {
-          temp = this.dataSource.map(item => {
-            // 为了防止直接修改源数据导致报错
-            let obj = Object.assign({}, item)
-            obj.type = obj.x
-            return obj
-          })
-        }
-        const dv = new DataSet.View().source(temp);
+    computed: {
+      data() {
+        const dv = new DataSet.View().source(this.dataSource)
         dv.transform({
           type: 'fold',
           fields: this.fields,
           key: 'x',
-          value: 'y',
-        });
-
-        this.data=dv.rows;
+          value: 'y'
+        })
+        return dv.rows
       }
     }
   }

ant-design-jeecg-vue/src/components/chart/Pie.vue

@@ -11,20 +11,6 @@
 <script>
   const DataSet = require('@antv/data-set')
 
-  const sourceData = [
-    { item: '事例一', percent: 40 },
-    { item: '事例二', percent: 21 },
-    { item: '事例三', percent: 17 },
-    { item: '事例四', percent: 13 },
-    { item: '事例五', percent: 9 }
-  ]
-
-  const scale = [{
-    dataKey: 'percent',
-    min: 0,
-    formatter: '.0%'
-  }]
-
   export default {
     props: {
       title: {
@@ -37,37 +23,22 @@
       },
       dataSource: {
         type: Array,
-        default: () => []
-      }
-    },
-    created() {
-      this.change()
-    },
-    watch: {
-      'dataSource': function() {
-        this.change()
-      }
-    },
-    methods: {
-      change() {
-        if (this.dataSource.length === 0) {
-          this.data = sourceData
-        } else {
-          const dv = new DataSet.View().source(this.dataSource)
-          dv.transform({
-            type: 'percent',
-            field: 'count',
-            dimension: 'item',
-            as: 'percent'
-          })
-          this.data = dv.rows
-        }
+        default: () => [
+          { item: '示例一', count: 40 },
+          { item: '示例二', count: 21 },
+          { item: '示例三', count: 17 },
+          { item: '示例四', count: 13 },
+          { item: '示例五', count: 9 }
+        ]
       }
     },
     data() {
       return {
-        data: '',
-        scale,
+        scale: [{
+          dataKey: 'percent',
+          min: 0,
+          formatter: '.0%'
+        }],
         pieStyle: {
           stroke: '#fff',
           lineWidth: 1
@@ -78,6 +49,19 @@
           }
         }]
       }
+    },
+    computed: {
+      data() {
+        let dv = new DataSet.View().source(this.dataSource)
+        // 计算数据百分比
+        dv.transform({
+          type: 'percent',
+          field: 'count',
+          dimension: 'item',
+          as: 'percent'
+        })
+        return dv.rows
+      }
     }
   }
 </script>

ant-design-jeecg-vue/src/components/chart/README.md

@@ -35,6 +35,45 @@ import Bar from '@/components/chart/Bar'
 ]
 ```
 
+##### 代码示例
+
+```html
+<template>
+    <bar title="柱状图" :dataSource="dataSource" :height="420"/>
+</template>
+
+<script>
+    import Bar from '@/components/chart/Bar'
+
+    export default {
+        name: 'ChartDemo',
+        components: {
+            Bar
+        },
+        data() {
+            return {
+                dataSource: [
+                    {
+                        "x": "1月",
+                        "y": 320
+                    },
+                    {
+                        "x": "2月",
+                        "y": 457
+                    },
+                    {
+                        "x": "3月",
+                        "y": 182
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style></style>
+```
+
 ## 多列柱状图
 
 ##### 引用方式