春风项目四线(合箱线、总装线)
cl
2024-01-16 b7ce0c733c97fab56004f38e8fc597d89e883a09
提交 | 用户 | 时间
fd2207 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 export default {
11   mixins: [resize],
12   props: {
13     className: {
14       type: String,
15       default: 'chart'
16     },
17     width: {
18       type: String,
19       default: '100%'
20     },
21     height: {
22       type: String,
23       default: '350px'
24     },
25     autoResize: {
26       type: Boolean,
27       default: true
28     },
29     chartData: {
30       type: Object,
31       required: true
32     }
33   },
34   data() {
35     return {
36       chart: null
37     }
38   },
39   watch: {
40     chartData: {
41       deep: true,
42       handler(val) {
43         this.setOptions(val)
44       }
45     }
46   },
47   mounted() {
48     this.$nextTick(() => {
49       this.initChart()
50     })
51   },
52   beforeDestroy() {
53     if (!this.chart) {
54       return
55     }
56     this.chart.dispose()
57     this.chart = null
58   },
59   methods: {
60     initChart() {
61       this.chart = echarts.init(this.$el, 'macarons')
62       this.setOptions(this.chartData)
63     },
64     setOptions({ expectedData, actualData } = {}) {
65       this.chart.setOption({
e211c9 66         title: {
J 67           text: '小时产量对比', // 标题文本
68           left: 'left' // 标题位置
69         },
fd2207 70         xAxis: {
71           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
72           boundaryGap: false,
73           axisTick: {
74             show: false
75           }
76         },
77         grid: {
78           left: 10,
79           right: 10,
80           bottom: 20,
81           top: 30,
82           containLabel: true
83         },
84         tooltip: {
85           trigger: 'axis',
86           axisPointer: {
87             type: 'cross'
88           },
89           padding: [5, 10]
90         },
91         yAxis: {
92           axisTick: {
93             show: false
94           }
95         },
96         legend: {
97           data: ['expected', 'actual']
98         },
99         series: [{
100           name: 'expected', itemStyle: {
101             normal: {
102               color: '#FF005A',
103               lineStyle: {
104                 color: '#FF005A',
105                 width: 2
106               }
107             }
108           },
109           smooth: true,
110           type: 'line',
111           data: expectedData,
112           animationDuration: 2800,
113           animationEasing: 'cubicInOut'
114         },
115         {
116           name: 'actual',
117           smooth: true,
118           type: 'line',
119           itemStyle: {
120             normal: {
121               color: '#3888fa',
122               lineStyle: {
123                 color: '#3888fa',
124                 width: 2
125               },
126               areaStyle: {
127                 color: '#f3f8ff'
128               }
129             }
130           },
131           data: actualData,
132           animationDuration: 2800,
133           animationEasing: 'quadraticOut'
134         }]
135       })
136     }
137   }
138 }
139 </script>