SupervisionFeedback.vue
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
<!-- 督办反馈 -->
<div class="SupervisionFeedback">
<div class="listbx">
<!-- <span :class="listIndex == 0 ? 'listadd' : ''" @click="listIndex = 0">
查看图表
</span>
<span :class="listIndex == 1 ? 'listadd' : ''" @click="listIndex = 1">
查看数据
</span> -->
</div>
<div id="dom" style="height: 400px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'SupervisionFeedback',
data() {
return {
listIndex: 0,
}
},
mounted() {
this.getEcharts()
},
methods: {
getEcharts() {
var chartDom = document.getElementById('dom')
var myChart = echarts.init(chartDom)
var option
option = {
color: ['#0080fe', '#5023e6'],
dataset: {
source: [
['type', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
['Forest', 40, 50, 80, 30, 20, 30, 20],
['Steppe', 20, 30, 40, 60, 70, 30, 20],
],
},
legend: {
right: '0%',
icon: 'circle',
},
xAxis: {
type: 'category',
axisTick: {
show: true,
},
splitLine: {
show: false,
},
},
yAxis: {
splitLine: {
show: false,
},
max: 100,
nameLocation: 'middle',
},
series: [
{
name: '计划完成数',
type: 'bar',
seriesLayoutBy: 'row',
},
{
name: '实际完成数',
type: 'bar',
seriesLayoutBy: 'row',
},
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}, //鼠标移上的阴影，默认是线
formatter: function (params) {
return `${params[0].data[0]}<br/> ${params[0].marker} ${params[0].seriesName}: ${params[0].data[1]}个 <br/> ${params[1].marker} ${params[1].seriesName}: ${params[0].data[2]}个`
},
},
}
option && myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
// window.onresize = function () {
// // myChart.resize()
// }
},
},
}
</script>
<style lang="scss" scoped>
.SupervisionFeedback {
position: relative;
.listbx {
position: absolute;
top: 15px;
left: 15px;
z-index: 10000;
background-color: rgb(222, 221, 221);
}
.listadd {
background-color: #9999;
padding: 6px 8px;
}
}
</style>