春风项目四线(合箱线、总装线)
懒羊羊
2024-01-17 5f7e70b8132d018614e8f4989d0614bd50cb7ecb
提交 | 用户 | 时间
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: '300px'
24     }
25   },
26   data() {
27     return {
28       chart: null
29     }
30   },
31   mounted() {
32     this.$nextTick(() => {
33       this.initChart()
34     })
35   },
36   beforeDestroy() {
37     if (!this.chart) {
38       return
39     }
40     this.chart.dispose()
41     this.chart = null
42   },
43   methods: {
44     initChart() {
45       this.chart = echarts.init(this.$el, 'macarons')
46
47       this.chart.setOption({
e211c9 48         title: {
J 49           text: '工位堵塞Top5', // 标题文本
50           left: 'center' // 标题位置
51         },
fd2207 52         tooltip: {
53           trigger: 'item',
54           formatter: '{a} <br/>{b} : {c} ({d}%)'
55         },
e211c9 56         // textStyle
fd2207 57         legend: {
e211c9 58           orient: 'vertical',
J 59
60           left: 'left',
61           // left: 'center',
62           // bottom: '10',//左侧高度
63           data: ['OP460', 'OP090', 'OP660', 'OP650', 'OP730']
fd2207 64         },
65         series: [
66           {
67             name: 'WEEKLY WRITE ARTICLES',
68             type: 'pie',
e211c9 69             // roseType: 'radius',//更改样式
J 70             radius: '50%',
71             // labelLine: {
72             //   length: 10 // 调整标签线的长度
73             // },
74             center: ['50%', '60%'],
fd2207 75             data: [
e211c9 76               { value: 5, name: 'OP460' },
J 77               { value: 9, name: 'OP090' },
78               { value: 5, name: 'OP660' },
79               { value: 5, name: 'OP650' },
80               { value: 7, name: 'OP730' }
fd2207 81             ],
e211c9 82             label: {
J 83               formatter: '{b}: {c} ({d}%)'
84             },
fd2207 85             animationEasing: 'cubicInOut',
86             animationDuration: 2600
87           }
88         ]
89       })
90     }
91   }
92 }
93 </script>