| | |
| | | }, |
| | | methods: { |
| | | initChart() { |
| | | // 对 complete 对象的键进行排序 |
| | | const sortedKeys = Object.keys(this.acitveData.complete) |
| | | .sort(); // 按照字符串的字典序对键进行排序 |
| | | const option = { |
| | | legend: { |
| | | right: 'right', |
| | |
| | | tooltip: {}, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: Object.keys(this.acitveData.complete), |
| | | data: sortedKeys, |
| | | axisLabel: { |
| | | interval: 0 // 强制显示所有标签 |
| | | }, |
| | | sortSeriesData: false |
| | | }, |
| | | yAxis: {}, |
| | | series: [ |
| | | { |
| | | name: '完成工单数', |
| | | data: Object.entries(this.acitveData.complete).map(([key, value]) => value), |
| | | data: sortedKeys.map(key => this.acitveData.complete[key]), |
| | | type: 'line', |
| | | itemStyle: { |
| | | color: 'rgba(62, 144, 247, 1)' |
| | |
| | | }, |
| | | { |
| | | name: '待完成工单数', |
| | | data: Object.entries(this.acitveData.waiting).map(([key, value]) => value), |
| | | data: sortedKeys.map(key => this.acitveData.waiting[key]), |
| | | type: 'line', |
| | | itemStyle: { |
| | | color: 'rgba(85, 192, 191, 1)' |
| | |
| | | }, |
| | | { |
| | | name: '待审批工单数', |
| | | data: Object.entries(this.acitveData.pending).map(([key, value]) => value), |
| | | data: sortedKeys.map(key => this.acitveData.pending[key]), |
| | | type: 'line', |
| | | itemStyle: { |
| | | color: 'rgba(255, 165, 0, 1)' |
| | |
| | | pending: {} |
| | | } |
| | | } |
| | | |
| | | lineChart = echarts.init(this.$refs.chartContent); |
| | | this.initChart(); |
| | | this.observe(); |