admin
2024-05-14 5966d6d329279119f3af29508b97c1d2c0bbe2bd
提交 | 用户 | 时间
e57a89 1 <template>
2   <div :class="className" :style="{height:height,width:width}" />
3 </template>
4
5 <script>
6 import * as echarts from 'echarts'
7 require('echarts/theme/macarons') // echarts theme
8 import resize from './mixins/resize'
9
10 const animationDuration = 6000
11
12 export default {
13   mixins: [resize],
14   props: {
15     className: {
16       type: String,
17       default: 'chart'
18     },
19     width: {
20       type: String,
21       default: '100%'
22     },
23     height: {
24       type: String,
25       default: '300px'
26     }
27   },
28   data() {
29     return {
30       chart: null
31     }
32   },
33   mounted() {
34     this.$nextTick(() => {
35       this.initChart()
36     })
37   },
38   beforeDestroy() {
39     if (!this.chart) {
40       return
41     }
42     this.chart.dispose()
43     this.chart = null
44   },
45   methods: {
46     initChart() {
47       this.chart = echarts.init(this.$el, 'macarons')
48
49       this.chart.setOption({
50         tooltip: {
51           trigger: 'axis',
52           axisPointer: { // 坐标轴指示器,坐标轴触发有效
53             type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
54           }
55         },
56         grid: {
57           top: 10,
58           left: '2%',
59           right: '2%',
60           bottom: '3%',
61           containLabel: true
62         },
63         xAxis: [{
64           type: 'category',
65           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
66           axisTick: {
67             alignWithLabel: true
68           }
69         }],
70         yAxis: [{
71           type: 'value',
72           axisTick: {
73             show: false
74           }
75         }],
76         series: [{
77           name: 'pageA',
78           type: 'bar',
79           stack: 'vistors',
80           barWidth: '60%',
81           data: [79, 52, 200, 334, 390, 330, 220],
82           animationDuration
83         }, {
84           name: 'pageB',
85           type: 'bar',
86           stack: 'vistors',
87           barWidth: '60%',
88           data: [80, 52, 200, 334, 390, 330, 220],
89           animationDuration
90         }, {
91           name: 'pageC',
92           type: 'bar',
93           stack: 'vistors',
94           barWidth: '60%',
95           data: [30, 52, 200, 334, 390, 330, 220],
96           animationDuration
97         }]
98       })
99     }
100   }
101 }
102 </script>