图表

src/components/skuModal/productModal.vue

@@ -36,6 +36,9 @@ export default class ProductModal extends Vue {
   mulit?:boolean
 
   config:any={
+    attr:{
+      calculateH:true
+    },
     search:{
       attr:{
         size:'mini',
@@ -105,10 +108,7 @@ export default class ProductModal extends Vue {
         field:'stock',
         width:80
       }]
-    },
-    // request:{
-    //   url:'/system/maindataMaterial/page'
-    // }
+    }
   }
   brandData:Array<any>=[]
   

src/views/components/bar01.vue

@@ -33,9 +33,21 @@ export default class Bar02 extends Vue {
         text: '每月订单量',
         left: 'center'
       },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
       xAxis: {
         type: 'category',
-        data: ['8月', '9月', '10月', '11月', '12月', '1月','2月','3月','4月','5月','6月','7月']
+        data: ['2022/08', '2022/09', '2022/10', '2022/11', '2022/12', '2023/01','2023/02','2023/03','2023/04','2023/05','2023/06','2023/07']
       },
       yAxis: {
         type: 'value'
@@ -45,6 +57,7 @@ export default class Bar02 extends Vue {
           data: [0, 0, 0, 0, 0, 0, 0, 0,100,460,600, 660],
           type: 'bar',
           showBackground: true,
+          barWidth: '60%',
           backgroundStyle: {
             color: 'rgba(180, 180, 180, 0.2)'
           },

src/views/components/line01.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Line01 extends Vue {
+  id=this.randomString();
+
+  mounted(){
+    this.init()
+  }
+
+  randomString(){
+    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    let result = '';
+    for (let i = 10; i > 0; --i) 
+      result += str[Math.floor(Math.random() * str.length)];
+    return result;
+  }
+  init(){
+    let chartDom:any = document.getElementById(this.id);
+    let myChart = echarts.init(chartDom);
+    let option: EChartsOption;
+
+    option = {
+      title: {
+        text: '每月成交量和退货量',
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: ['成交量', '退货量',]
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature: {
+          // saveAsImage: {}
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['2022/08', '2022/09', '2022/10', '2022/11', '2022/12', '2023/01','2023/02','2023/03','2023/04','2023/05','2023/06','2023/07']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: '成交量',
+          type: 'line',
+          data: [0, 0, 0, 0, 0, 0, 0, 0,70,380,500, 580]
+        },
+        {
+          name: '退货量',
+          type: 'line',
+          data: [0, 0, 0, 0, 0, 0, 0, 0,10,40,50, 62]
+        }
+      ]
+    };
+
+    option && myChart.setOption(option);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart{
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/components/pie01.vue

@@ -30,7 +30,7 @@ export default class Pie01 extends Vue {
 
     option = {
       title: {
-        text: '月区域订单量',
+        text: '区域月订单量',
         left: 'center'
       },
       tooltip: {
@@ -42,7 +42,7 @@ export default class Pie01 extends Vue {
       },
       series: [
         {
-          name: 'Access From',
+          name: '当前数据',
           type: 'pie',
           radius: '50%',
           data:

src/views/components/pie02.vue

@@ -42,7 +42,7 @@ export default class Pie02 extends Vue {
       },
       series: [
         {
-          name: 'Access From',
+          name: '当前数据',
           type: 'pie',
           radius: ['40%', '70%'],
           avoidLabelOverlap: false,

src/views/components/rose.vue

@@ -40,9 +40,9 @@ export default class Rose extends Vue {
         show: true,
         feature: {
           mark: { show: true },
-          dataView: { show: true, readOnly: false },
-          restore: { show: true },
-          saveAsImage: { show: true }
+          // dataView: { show: true, readOnly: false },
+          // restore: { show: true },
+          // saveAsImage: { show: true }
         }
       },
       series: [

src/views/index.vue

@@ -15,6 +15,9 @@
       <div class="bottom-box">
         <bar01 />
       </div>
+      <div class="bottom-box">
+        <line01 />
+      </div>
     </div>
   </div>
 </template>
@@ -25,8 +28,9 @@ import pie01 from './components/pie01.vue'
 import rose from './components/rose.vue'
 import pie02 from './components/pie02.vue'
 import bar01 from './components/bar01.vue'
+import Line01 from './components/line01.vue'
 
-@Component({components:{pie01,rose,pie02,bar01}})
+@Component({components:{pie01,rose,pie02,bar01,Line01}})
 export default class IndexView extends Vue {
 
   mounted(){