提交

2023-08-09 16:44:10 +08:00
parent 2cdb072ab8
commit ba59394115
100 changed files with 8965 additions and 307 deletions
--- a/src/views/dashboard/BarChart3.vue
+++ b/src/views/dashboard/BarChart3.vue
@@ -0,0 +1,102 @@
+<template>
+  <!-- 本月成交排行榜 -->
+  <div class="chart" style="height:200px;width:100%;" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+import { getLastDealRateRange } from '@/api/home'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  // props: {
+  //   className: {
+  //     type: String,
+  //     default: 'chart'
+  //   },
+  //   width: {
+  //     type: String,
+  //     default: '100%'
+  //   },
+  //   height: {
+  //     type: String,
+  //     default: '300px'
+  //   }
+  // },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      getLastDealRateRange().then((resp) => {
+        this.initChart(resp.data)
+      })
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart(item) {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['成交率'],
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: item.people,
+            // axisTick: {
+            //   alignWithLabel: true
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // axisTick: {
+            //   show: false
+            // }
+          },
+        ],
+        series: [
+          {
+            name: '成交率',
+            type: 'bar',
+            // stack: 'vistors',
+            barWidth: 40,
+            data: item.data,
+            // animationDuration
+          },
+        ],
+      })
+    },
+  },
+}
+</script>