Adam / gulu-admin

Blame view

src/components/LineChart/index.vue 2.76 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
 
  import resize from '@/components/mixins/resize'
d7d9c38c2   Adam   auto commit the c... 
12
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
56
57
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
89
90
91
92
93
94
95
96
97
 
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    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.setOptions(this.chartData)
      },
      setOptions({ expectedData, actualData } = {}) {
        this.chart.setOption({
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
          legend: {
            data: ['expected', 'actual']
          },
398cda401   Adam   auto commit the c... 
98
99
100
101
102
 
          series: [
            {
              name: 'expected',
              itemStyle: {
                normal: {
d7d9c38c2   Adam   auto commit the c... 
103
 
                  color: '#FF005A',
398cda401   Adam   auto commit the c... 
104
105
106
107
 
                  lineStyle: {
                    color: '#FF005A',
                    width: 2
                  }
d7d9c38c2   Adam   auto commit the c... 
108
 
                }
398cda401   Adam   auto commit the c... 
109
110
111
112
113
114
 
              },
              smooth: true,
              type: 'line',
              data: expectedData,
              animationDuration: 2800,
              animationEasing: 'cubicInOut'
d7d9c38c2   Adam   auto commit the c... 
115
 
            },
398cda401   Adam   auto commit the c... 
116
117
118
119
120
121
 
            {
              name: 'actual',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
d7d9c38c2   Adam   auto commit the c... 
122
 
                  color: '#3888fa',
398cda401   Adam   auto commit the c... 
123
124
125
126
127
128
129
 
                  lineStyle: {
                    color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
d7d9c38c2   Adam   auto commit the c... 
130
 
                }
398cda401   Adam   auto commit the c... 
131
132
133
134
135
136
 
              },
              data: actualData,
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            }
          ]
d7d9c38c2   Adam   auto commit the c... 
137
138
139
140
141
 
        })
      }
    }
  }
  </script>