jeecg-boot 1.1 稳定版本发布

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

@@ -0,0 +1,68 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+
+    <v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
+      <v-tooltip/>
+      <v-axis/>
+      <v-line position="x*y" :size="lineSize"/>
+      <v-area position="x*y"/>
+    </v-chart>
+
+  </div>
+</template>
+
+<script>
+  import { triggerWindowResizeEvent } from '@/utils/util'
+
+  export default {
+    name: 'AreaChartTy',
+    props: {
+      // 图表数据
+      dataSource: {
+        type: Array,
+        required: true
+      },
+      // 图表标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // x 轴别名
+      x: {
+        type: String,
+        default: 'x'
+      },
+      // y 轴别名
+      y: {
+        type: String,
+        default: 'y'
+      },
+      // 图表高度
+      height: {
+        type: Number,
+        default: 254
+      },
+      // 线的粗细
+      lineSize: {
+        type: Number,
+        default: 2
+      }
+    },
+    computed: {
+      scale() {
+        return [
+          { dataKey: 'x', title: this.x, alias: this.x },
+          { dataKey: 'y', title: this.y, alias: this.y }
+        ]
+      }
+    },
+    mounted() {
+      triggerWindowResizeEvent()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "chart";
+</style>

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

@@ -1,57 +1,38 @@
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart
-      height="254"
-      :data="data"
-      :forceFit="true"
-      :padding="['auto', 'auto', '40', '50']">
-      <v-tooltip />
-      <v-axis />
+    <v-chart :forceFit="true" :height="height" :data="dataSource" :padding="padding">
+      <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
-  }]
+  import { triggerWindowResizeEvent } from '@/utils/util'
 
   export default {
-    name: "Bar",
+    name: 'Bar',
     props: {
+      dataSource: {
+        type: Array,
+        required: true
+      },
       title: {
         type: String,
         default: ''
+      },
+      height: {
+        type: Number,
+        default: 254
       }
     },
-    data () {
-      return {
-        data,
-        scale,
-        tooltip
-      }
+    data() {
+      return { padding: ['auto', 'auto', '40', '50'] }
+    },
+    mounted() {
+      triggerWindowResizeEvent()
     }
   }
 </script>

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

@@ -0,0 +1,79 @@
+<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-tooltip />
+      <v-axis />
+      <v-legend />
+      <v-bar position="x*y" color="type" :adjust="adjust" />
+    </v-chart>
+  </div>
+</template>
+
+<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: {
+      title: {
+        type: String,
+        default: ''
+      },
+      dataSource:{
+        type:Array,
+        default:()=>[]
+      },
+      fields:{
+        type:Array,
+        default:()=>[]
+      },
+      height: {
+        type: Number,
+        default: 254
+      }
+    },
+    data() {
+      return {
+        data:"",
+        adjust: [{
+          type: 'dodge',
+          marginRatio: 1 / 32,
+        }],
+      };
+    },
+    watch: {
+      'dataSource': function () {
+        this.drawChart();
+      }
+    },
+    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);
+        dv.transform({
+          type: 'fold',
+          fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
+          key: 'x',
+          value: 'y',
+        });
+        this.data=dv.rows;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,190 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+      <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
+      <v-axis
+        dataKey="value"
+        :zIndex="2"
+        :line="null"
+        :label="axisLabel"
+        :subTickCount="4"
+        :subTickLine="axisSubTickLine"
+        :tickLine="axisTickLine"
+        :grid="null"
+      ></v-axis>
+      <v-axis dataKey="1" :show="false"></v-axis>
+      <v-series
+        gemo="point"
+        position="value*1"
+        shape="pointer"
+        color="#1890FF"
+        :active="false"
+      ></v-series>
+      <v-guide
+        type="arc"
+        :zIndex="0"
+        :top="false"
+        :start="arcGuide1Start"
+        :end="arcGuide1End"
+        :vStyle="arcGuide1Style"
+      ></v-guide>
+      <v-guide
+        type="arc"
+        :zIndex="1"
+        :start="arcGuide2Start"
+        :end="getArcGuide2End"
+        :vStyle="arcGuide2Style"
+      ></v-guide>
+      <v-guide
+        type="html"
+        :position="htmlGuidePosition"
+        :html="getHtmlGuideHtml()"
+      ></v-guide>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+  import {registerShape} from 'viser-vue';
+
+  registerShape('point', 'pointer', {
+    draw(cfg, container) {
+      let point = cfg.points[0];
+      point = this.parsePoint(point);
+      const center = this.parsePoint({
+        x: 0,
+        y: 0,
+      });
+      container.addShape('line', {
+        attrs: {
+          x1: center.x,
+          y1: center.y,
+          x2: point.x,
+          y2: point.y + 15,
+          stroke: cfg.color,
+          lineWidth: 5,
+          lineCap: 'round',
+        }
+      });
+      return container.addShape('circle', {
+        attrs: {
+          x: center.x,
+          y: center.y,
+          r: 9.75,
+          stroke: cfg.color,
+          lineWidth: 4.5,
+          fill: '#fff',
+        }
+      });
+    }
+  });
+
+  const scale = [{
+    dataKey: 'value',
+    min: 0,
+    max: 9,
+    tickInterval: 1,
+    nice: false,
+  }];
+
+  const sourceData = [
+    {value: 6.7},
+  ];
+
+  export default {
+    name: "DashChartDemo",
+    props: {
+      value: {
+        type: Number,
+        default: 6.7
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      height: {
+        type: Number,
+        default: 254
+      }
+    },
+    created() {
+      if (!this.value) {
+        this.data = sourceData;
+      } else {
+        this.data = [
+          {value: this.value},
+        ];
+      }
+      this.getData()
+    },
+    watch: {
+      'value': function (val) {
+        this.data = [
+          {value: val},
+        ];
+        this.getData();
+      }
+    },
+    methods: {
+      getData() {
+        if (this.data && this.data.length > 0) {
+          this.abcd = this.data[0].value * 10
+        } else {
+          this.abcd = 70
+        }
+      },
+      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' +
+          '</div>'
+      },
+      getArcGuide2End() {
+        return [this.data[0].value, 0.945]
+      }
+    },
+    data() {
+      return {
+        data: [],
+        scale: scale,
+        abcd: 70,
+        axisLabel: {
+          offset: -16,
+          textStyle: {
+            fontSize: 18,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }
+        },
+        axisSubTickLine: {
+          length: -8,
+          stroke: '#fff',
+          strokeOpacity: 1,
+        },
+        axisTickLine: {
+          length: -17,
+          stroke: '#fff',
+          strokeOpacity: 1,
+        },
+        arcGuide1Start: [0, 0.945],
+        arcGuide1End: [9, 0.945],
+        arcGuide1Style: {
+          stroke: '#CBCBCB',
+          lineWidth: 18,
+        },
+        arcGuide2Start: [0, 0.945],
+        arcGuide2Style: {
+          stroke: '#1890FF',
+          lineWidth: 18,
+        },
+        htmlGuidePosition: ['50%', '100%'],
+        htmlGuideHtml: `
+        <div style="width: 300px;text-align: center;">
+          <p style="font-size: 14px;color: #545454;margin: 0;">${this.title}</p>
+          <p style="font-size: 36px;color: #545454;margin: 0;">${this.abcd}%</p>
+        </div>
+      `,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,100 @@
+<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>
+  </div>
+</template>
+
+<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: {
+      title: {
+        type: String,
+        default: ''
+      },
+      dataSource:{
+        type:Array,
+        default:()=>[]
+      },
+      fields:{
+        type:Array,
+        default: () => ['jeecg', 'jeebt']
+      },
+      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();
+      }
+    },
+    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);
+        dv.transform({
+          type: 'fold',
+          fields: this.fields,
+          key: 'x',
+          value: 'y',
+        });
+
+        this.data=dv.rows;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <v-chart 
-      :forceFit="true" 
-      :height="height" 
-      :width="width" 
-      :data="data" 
-      :scale="scale" 
+    <v-chart
+      :forceFit="true"
+      :height="height"
+      :width="width"
+      :data="data"
+      :scale="scale"
       :padding="0">
-      <v-tooltip />
+      <v-tooltip/>
       <v-interval
         :shape="['liquid-fill-gauge']"
         position="transfer*value"
         color=""
         :v-style="{
-          lineWidth: 10,
+          lineWidth: 8,
           opacity: 0.75
         }"
         :tooltip="[
@@ -47,8 +47,15 @@
 </template>
 
 <script>
+
+  const sourceDataConst = [
+    { transfer: '一月', value: 813 },
+    { transfer: '二月', value: 233 },
+    { transfer: '三月', value: 561 }
+  ]
+
   export default {
-    name: "Liquid",
+    name: 'Liquid',
     props: {
       height: {
         type: Number,
@@ -58,6 +65,12 @@
         type: Number,
         default: 0
       }
+    },
+    data() {
+      return {
+        data: sourceDataConst,
+        scale: []
+      }
     }
   }
 </script>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="antv-chart-mini">
     <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="datasource" :padding="[36, 0, 18, 0]">
-        <v-tooltip />
-        <v-smooth-area position="x*y" />
+      <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="[36, 0, 18, 0]">
+        <v-tooltip/>
+        <v-smooth-area position="x*y"/>
       </v-chart>
     </div>
   </div>
@@ -11,53 +11,55 @@
 
 <script>
   import moment from 'dayjs'
-  const data = []
+
+  const sourceData = []
   const beginDay = new Date().getTime()
 
   for (let i = 0; i < 10; i++) {
-    data.push({
+    sourceData.push({
       x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
       y: Math.round(Math.random() * 10)
     })
   }
 
-  console.log("123321",data)
-  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: "MiniArea",
-    props:{
-      datasource:{
+    name: 'MiniArea',
+    props: {
+      dataSource: {
         type: Array,
-        default:()=>[]
+        default: () => []
+      },
+      // x 轴别名
+      x: {
+        type: String,
+        default: 'x'
+      },
+      // y 轴别名
+      y: {
+        type: String,
+        default: 'y'
       }
     },
-    created(){
-      if(this.datasource.length==0){
-        this.datasource = data;
-      }
-    },
-    data () {
+    data() {
       return {
-        tooltip,
-        scale,
+        data: [],
         height: 100
       }
+    },
+    computed: {
+      scale() {
+        return [
+          { dataKey: 'x', title: this.x, alias: this.x },
+          { dataKey: 'y', title: this.y, alias: this.y }
+        ]
+      }
+    },
+    created() {
+      if (this.dataSource.length === 0) {
+        this.data = sourceData
+      } else {
+        this.data = this.dataSource
+      }
     }
   }
 </script>

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

@@ -1,21 +1,20 @@
 <template>
-  <div class="antv-chart-mini">
-    <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="datasource" :padding="[36, 5, 18, 5]">
-        <v-tooltip />
-        <v-bar position="x*y" />
-      </v-chart>
-    </div>
+  <div :style="{'width':width==null?'auto':width+'px'}">
+    <v-chart :forceFit="width==null" :height="height" :data="data" padding="0">
+      <v-tooltip/>
+      <v-bar position="x*y"/>
+    </v-chart>
   </div>
 </template>
 
 <script>
   import moment from 'dayjs'
-  const data = []
+
+  const sourceData = []
   const beginDay = new Date().getTime()
 
   for (let i = 0; i < 10; i++) {
-    data.push({
+    sourceData.push({
       x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
       y: Math.round(Math.random() * 10)
     })
@@ -40,24 +39,33 @@
   }]
 
   export default {
-    name: "MiniBar",
-    props:{
-      datasource:{
+    name: 'MiniBar',
+    props: {
+      dataSource: {
         type: Array,
-        default:()=>[]
+        default: () => []
+      },
+      width: {
+        type: Number,
+        default: null
+      },
+      height: {
+        type: Number,
+        default: 200
       }
     },
-    created(){
-      if(this.datasource.length==0){
-        this.datasource = data;
+    created() {
+      if (this.dataSource.length === 0) {
+        this.data = sourceData
+      } else {
+        this.data = this.dataSource
       }
     },
-    data () {
+    data() {
       return {
-        data,
         tooltip,
-        scale,
-        height: 100
+        data: [],
+        scale
       }
     }
   }

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

@@ -1,26 +1,26 @@
 <template>
   <div class="chart-mini-progress">
     <div class="target" :style="{ left: target + '%'}">
-      <span :style="{ backgroundColor: color }" />
+      <span :style="{ backgroundColor: color }"/>
       <span :style="{ backgroundColor: color }"/>
     </div>
     <div class="progress-wrapper">
-      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
+      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height+'px' }"></div>
     </div>
   </div>
 </template>
 
 <script>
   export default {
-    name: "MiniProgress",
+    name: 'MiniProgress',
     props: {
       target: {
         type: Number,
         default: 0
       },
       height: {
-        type: String,
-        default: '10px'
+        type: Number,
+        default: 10
       },
       color: {
         type: String,
@@ -64,7 +64,7 @@
       position: relative;
 
       .progress {
-        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+        transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
         border-radius: 1px 0 0 1px;
         background-color: #1890ff;
         width: 0;

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

@@ -0,0 +1,83 @@
+<template>
+  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+    <v-tooltip :showTitle="false" dataKey="item*percent"/>
+    <v-axis/>
+    <v-legend dataKey="item"/>
+    <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/>
+    <v-coord type="theta"/>
+  </v-chart>
+</template>
+
+<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: {
+        type: String,
+        default: ''
+      },
+      height: {
+        type: Number,
+        default: 254
+      },
+      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
+        }
+      }
+    },
+    data() {
+      return {
+        data: '',
+        scale,
+        pieStyle: {
+          stroke: '#fff',
+          lineWidth: 1
+        },
+        labelConfig: ['percent', {
+          formatter: (val, item) => {
+            return item.point.item + ': ' + val
+          }
+        }]
+      }
+    }
+  }
+</script>

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

@@ -0,0 +1,328 @@
+# 报表组件文档
+
+## 柱状图
+
+##### 引用方式
+
+```js 
+import Bar from '@/components/chart/Bar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| dataSource | array  | ✔️ | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+## 多列柱状图
+
+##### 引用方式
+
+```js 
+import BarMultid from '@/components/chart/BarMultid'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| fields     | array  |    | 主列字段列表     |
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."]
+```
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "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
+    }
+]
+```
+
+## 迷你柱状图
+
+不带标题和数据轴的柱状图
+
+##### 引用方式
+
+```js 
+import MiniBar from '@/components/chart/MiniBar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明            |
+|------------|--------|----|---------------|
+| width      | number |    | 报表宽度度，默认自适应宽度 |
+| height     | number |    | 报表高度，默认200    |
+| dataSource | array  |    | 报表数据源         |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+## 面积图
+
+##### 引用方式
+
+```js 
+import AreaChartTy from '@/components/chart/AreaChartTy'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| dataSource | array  | ✔️ | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+| lineSize   | number |    | 线的粗细，默认2   |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+## 多行折线图
+
+##### 引用方式
+
+```js 
+import LineChartMultid from '@/components/chart/LineChartMultid'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| fields     | array  |    | 主列字段列表     |
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["jeecg", "jeebt"]
+```
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "type": "Jan", // 列名
+        "jeecg": 7,
+        "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 },
+    { "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 }
+]
+```
+
+## 饼状图
+
+##### 引用方式
+
+```js 
+import Pie from '@/components/chart/Pie'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    // 所有的 percent 相加等于 100
+    { "item": "一月", "percent": 40 },
+    { "item": "二月", "percent": 21 },
+    { "item": "三月", "percent": 17 },
+    { "item": "四月", "percent": 13 },
+    { "item": "五月", "percent": 9 }
+]
+```
+
+## 雷达图
+
+##### 引用方式
+
+```js 
+import Radar from '@/components/chart/Radar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    // score 最小值为 0，最大值为 100
+    { "item": "一月", "score": 40 },
+    { "item": "二月", "score": 20 },
+    { "item": "三月", "score": 67 },
+    { "item": "四月", "score": 43 },
+    { "item": "五月", "score": 90 }
+]
+```
+
+## 进度条
+
+##### 引用方式
+
+```js 
+import MiniProgress from '@/components/chart/MiniProgress'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明                |
+|------------|--------|----|-------------------|
+| percentage | number |    | 当前进度百分比，默认0，最高100 |
+| target     | number |    | 目标值，默认10          |
+| height     | number |    | 进度条高度，默认10        |
+| color      | string |    | 进度条颜色，默认 #13C2C2  |
+
+## 仪表盘
+
+##### 引用方式
+
+```js 
+import DashChartDemo from '@/components/chart/DashChartDemo'
+```
+
+##### 参数列表
+
+| 参数名    | 类型     | 必填 | 说明             |
+|--------|--------|----|----------------|
+| title  | string |    | 报表标题           |
+| value  | number |    | 当前值，默认6.7，最大为9 |
+| height | number |    | 报表高度，默认254     |
+
+## 排名列表
+
+##### 引用方式
+
+```js 
+import RankList from '@/components/chart/RankList'
+```
+
+##### 参数列表
+
+| 参数名    | 类型     | 必填 | 说明           |
+|--------|--------|----|--------------|
+| title  | string |    | 报表标题         |
+| list   | array  |    | 排名列表数据       |
+| height | number |    | 报表高度，默认自适应高度 |
+
+##### list 示例
+
+```json
+[
+    {
+        "name": "北京朝阳 1 号店",
+        "total": 1981
+    },
+    { "name": "北京朝阳 2 号店", "total": 1359 },
+    { "name": "北京朝阳 3 号店", "total": 1354 },
+    { "name": "北京朝阳 4 号店", "total": 263 },
+    { "name": "北京朝阳 5 号店", "total": 446 },
+    { "name": "北京朝阳 6 号店", "total": 796 }
+]
+```

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

@@ -1,12 +1,12 @@
 <template>
-  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+  <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
     <v-tooltip></v-tooltip>
-    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
-    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
-    <v-legend dataKey="user" marker="circle" :offset="30" />
-    <v-coord type="polar" radius="0.8" />
-    <v-line position="item*score" color="user" :size="2" />
-    <v-point position="item*score" color="user" :size="4" shape="circle" />
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid"/>
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid"/>
+    <v-legend dataKey="user" marker="circle" :offset="30"/>
+    <v-coord type="polar" radius="0.8"/>
+    <v-line position="item*score" color="user" :size="2"/>
+    <v-point position="item*score" color="user" :size="4" shape="circle"/>
   </v-chart>
 </template>
 
@@ -38,26 +38,48 @@
     {
       dataKey: 'score',
       min: 0,
-      max: 80
+      max: 100
     }, {
       dataKey: 'user',
       alias: '类型'
     }
   ]
 
+  const sourceData = [
+    { item: '示例一', score: 40 },
+    { item: '示例二', score: 20 },
+    { item: '示例三', score: 67 },
+    { item: '示例四', score: 43 },
+    { item: '示例五', score: 90 }
+  ]
+
   export default {
     name: 'Radar',
     props: {
-      data: {
+      height: {
+        type: Number,
+        default: 254
+      },
+      dataSource: {
         type: Array,
-        default: null,
+        default: () => []
       }
     },
-    data () {
+    data() {
       return {
         axis1Opts,
         axis2Opts,
-        scale
+        scale,
+        data: sourceData
+      }
+    },
+    watch: {
+      dataSource(newVal) {
+        if (newVal.length === 0) {
+          this.data = sourceData
+        } else {
+          this.data = newVal
+        }
       }
     }
   }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="rank">
     <h4 class="title">{{ title }}</h4>
-    <ul class="list">
+    <ul class="list" :style="{height:height?`${height}px`:'auto',overflow:'auto'}">
       <li :key="index" v-for="(item, index) in list">
         <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
         <span>{{ item.name }}</span>
@@ -23,6 +23,10 @@
       list: {
         type: Array,
         default: null
+      },
+      height: {
+        type: Number,
+        default: null
       }
     }
   }

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

@@ -2,63 +2,65 @@
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
     <v-chart
-      height="254"
+      :height="height"
       :data="data"
       :scale="scale"
       :forceFit="true"
       :padding="['auto', 'auto', '40', '50']">
-      <v-tooltip />
-      <v-axis />
+      <v-tooltip/>
+      <v-axis/>
       <v-bar position="x*y"/>
     </v-chart>
   </div>
 </template>
 
 <script>
-  const tooltip = [
-    'x*y',
-    (x, y) => ({
-      name: x,
-      value: y
-    })
-  ]
-  const scale = [{
-    dataKey: 'x',
-    title: '日期(天)',
-    alias: '日期(天)',
-    min: 2
-  }, {
-    dataKey: 'y',
-    title: '流量(Gb)',
-    alias: '流量(Gb)',
-    min: 1
-  }]
 
   export default {
-    name: "Bar",
+    name: 'Bar',
     props: {
       title: {
         type: String,
         default: ''
+      },
+      x: {
+        type: String,
+        default: 'x'
+      },
+      y: {
+        type: String,
+        default: 'y'
+      },
+      data: {
+        type: Array,
+        default: () => []
+      },
+      height: {
+        type: Number,
+        default: 254
       }
     },
-    data () {
-      return {
-        data: [],
-        scale,
-        tooltip
+    data() {
+      return {}
+    },
+    computed: {
+      scale() {
+        return [
+          { dataKey: 'x', title: this.x, alias: this.x },
+          { dataKey: 'y', title: this.y, alias: this.y }
+        ]
       }
     },
-    created () {
-      this.getMonthBar()
+    created() {
+      // this.getMonthBar()
     },
     methods: {
-      getMonthBar() {
-        this.$http.get('/analysis/month-bar')
-          .then(res => {
-            this.data = res.result
-          })
-      }
+      // getMonthBar() {
+      //   this.$http.get('/analysis/month-bar')
+      //     .then(res => {
+      //       this.data = res.result
+      //     })
+      // }
     }
   }
 </script>

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

@@ -10,11 +10,13 @@
   export default {
     name: "Trend",
     props: {
+      // 同title
       term: {
         type: String,
         default: '',
         required: true
       },
+      // 百分比
       percentage: {
         type: Number,
         default: null