Adam / gulu-admin

Blame view

src/components/RaddarChart/index.vue 2.86 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
1
 
  <template>
398cda401   Adam   auto commit the c... 
2
3
4
5
 
    <div
      :class="className"
      :style="{height:height,width:width}"
    />
d7d9c38c2   Adam   auto commit the c... 
6
7
8
9
10
 
  </template>
  
  <script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
398cda401   Adam   auto commit the c... 
11
12
 
  import resize from '@/components/mixins/resize'
  // import resize from './mixins/resize'
d7d9c38c2   Adam   auto commit the c... 
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
  
  const animationDuration = 3000
  
  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(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
  
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
398cda401   Adam   auto commit the c... 
56
57
 
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
d7d9c38c2   Adam   auto commit the c... 
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          radar: {
            radius: '66%',
            center: ['50%', '42%'],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: 'rgba(127,95,132,.3)',
                opacity: 1,
                shadowBlur: 45,
                shadowColor: 'rgba(0,0,0,.5)',
                shadowOffsetX: 0,
                shadowOffsetY: 15
              }
            },
            indicator: [
              { name: 'Sales', max: 10000 },
              { name: 'Administration', max: 20000 },
              { name: 'Information Techology', max: 20000 },
              { name: 'Customer Support', max: 20000 },
              { name: 'Development', max: 20000 },
              { name: 'Marketing', max: 20000 }
            ]
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
          },
398cda401   Adam   auto commit the c... 
89
90
91
92
93
94
95
96
97
98
99
100
 
          series: [
            {
              type: 'radar',
              symbolSize: 0,
              areaStyle: {
                normal: {
                  shadowBlur: 13,
                  shadowColor: 'rgba(0,0,0,.2)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1
                }
d7d9c38c2   Adam   auto commit the c... 
101
 
              },
398cda401   Adam   auto commit the c... 
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
              data: [
                {
                  value: [5000, 7000, 12000, 11000, 15000, 14000],
                  name: 'Allocated Budget'
                },
                {
                  value: [4000, 9000, 15000, 15000, 13000, 11000],
                  name: 'Expected Spending'
                },
                {
                  value: [5500, 11000, 12000, 15000, 12000, 12000],
                  name: 'Actual Spending'
                }
              ],
              animationDuration: animationDuration
            }
          ]
d7d9c38c2   Adam   auto commit the c... 
119
120
121
122
123
 
        })
      }
    }
  }
  </script>