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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <template>
| <div id="myChart"></div>
| </template>
| <script>
| export default {
| name:'category',
| props:{
| legendData:{
| type:Array,
| default:()=>{
| return ['进校人数','出校人数']
| }
| },
| xAxisData:{
| type:Array,
| default:()=>{
| return ['06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
| }
| },
| seriesData:{
| type:Array,
| default:()=>{
| return []
| }
| }
| },
| watch: {
| "seriesData":{
| handler:function(val,oldVal){
| if(val !== oldVal){
| this.init()
| }
| },
| deep:true
| },
| "TreeDataPool.showTreeBox":{
| handler:function(val,oldVal){
| if(val !== oldVal){
| this.handleResize()
| }
| }
| },
| },
| data() {
| return {
| myChart:Object
| }
| },
| computed: {
| options(){
| return {
| tooltip:{
| trigger:'axis',
| extraCssText:'text-align:left;'
| },
| legend:{
| show:true,
| left:20,
| top:0,
| type:'plain',
| align:'left',
| icon:'circle',
| textStyle: {
| color:'#ff'
| }
| },
| // grid:{
| // left:50,
| // top:50,
| // right:10,
| // bottom:20
| // },
| xAxis: {
| type: 'category',
| axisLine:{
| lineStyle:{
| color:'#fff',
| height:'100%'
| }
| },
| data: this.xAxisData
| },
| yAxis: {
| type: 'value',
| axisLine:{
| lineStyle:{
| color:'#fff',
| height:'100%'
| }
| },
| splitLine:{
| lineStyle:{
| color:['#616A6B']
| }
| },
| nameGap:20
| },
| series: this.seriesData
| }
| }
| },
| methods: {
| init(){
| // const myChart = this.$echarts.init(document.getElementById('myChart'))
| // myChart.setOption({
| // tooltip:{
| // trigger:'axis',
| // extraCssText:'text-align:left;'
| // },
| // legend:{
| // show:true,
| // type:'plain',
| // align:'left',
| // icon:'circle'
| // },
| // xAxis: {
| // type: 'category',
| // data: this.xAxisData
| // },
| // yAxis: {
| // type: 'value',
| // name:'单位',
| // nameGap:20
| // },
| // series: this.seriesData
| // })
| this.myChart.setOption(this.options)
| },
| handleResize(){
| this.myChart.resize()
| }
| },
| mounted() {
| // window.addEventListener("resize", this.handleResize);
| // this.init()
| this.$nextTick(()=>{
| // let height = document.getElementById('myChart').clientHeight
| // console.log(height,'myChart的高度')
| this.myChart = this.$echarts.init(document.getElementById('myChart'))
| this.myChart.setOption(this.options)
| })
| },
| }
| </script>
| <style lang="scss">
| #myChart{
| width: 100%;
| height: 100%;
| }
| </style>
|
|
