Blame view

src/views/dashboard/LineChart.vue 3.07 KB
yuanshuhui authored
1
2
3
4
5
6
7
8
9
<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
yuanshuhui authored
10
yuanshuhui authored
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
    },
30
    lastData: {
yuanshuhui authored
31
32
33
34
35
36
37
38
39
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
40
yuanshuhui authored
41
  watch: {
42
    lastData: {
yuanshuhui authored
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
      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')
64
      this.setOptions(this.lastData)
yuanshuhui authored
65
    },
66
    setOptions({ receiptDetails, shipmentDetails } = {}) {
yuanshuhui authored
67
      this.chart.setOption({
yuanshuhui authored
68
69
70
71
72
73
74
75
76
77
        title: {
        text: '历史每日收发货量',
        textStyle: {
          color: 'rgba(0, 0, 0, 0.7)',
          fontSize: '15',
          fontWeight:'bold'
        }


    },
yuanshuhui authored
78
        xAxis: {
79
          data: [this.changeDate(this.reduceDays(6)),this.changeDate(this.reduceDays(5)),this.changeDate(this.reduceDays(4)), this.changeDate(this.reduceDays(3)), this.changeDate(this.reduceDays(2)), this.changeDate(this.reduceDays(1)), this.changeDate(new Date())],
yuanshuhui authored
80
          boundaryGap: true,
yuanshuhui authored
81
          axisTick: {
yuanshuhui authored
82
83
84
            show: true
          },
yuanshuhui authored
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
        },
        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: {
yuanshuhui authored
106
          data: ['收货量', '发货量']
yuanshuhui authored
107
108
        },
        series: [{
yuanshuhui authored
109
          name: '收货量', itemStyle: {
yuanshuhui authored
110
111
112
113
114
115
116
117
118
119
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
120
          data: receiptDetails,
yuanshuhui authored
121
122
123
124
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
yuanshuhui authored
125
          name: '发货量',
yuanshuhui authored
126
127
128
129
130
131
132
133
134
135
136
137
138
139
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
140
          data: shipmentDetails,
yuanshuhui authored
141
142
143
144
145
146
147
148
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    }
  }
}
</script>