79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
|
|
Vue.component("many-chart", {
|
|
template: `
|
|
<div class="many-chart-max" ref="process" @mouseover="MouseEnter" @mouseout="MouseLeave">
|
|
<div class="many-chart-min" :style="{'width': (data.length * 270) +'px'}">
|
|
<div style="width: 270px;" v-for="(item,i) in forData">
|
|
<material-many-bar-chart :yaxis="i==0?true:false" :height="200" :data="item"></material-many-bar-chart>
|
|
<div class="many-chart-text" style="text-align: center ">{{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
forData:[],
|
|
index:0,
|
|
interval:''
|
|
}
|
|
},
|
|
created(){
|
|
this.init()
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.index = 0
|
|
var data = this.data
|
|
data.map(x=>{
|
|
x.merge = x.yData_1.concat(x.yData_2)
|
|
return
|
|
})
|
|
let max = 0
|
|
for (let i = 0; i < data.length; i++) {
|
|
for (let j = 0; j < data[i].merge.length ; j++) {
|
|
if(max < Number(data[i].merge[j])){
|
|
max = Number(data[i].merge[j])
|
|
}
|
|
}
|
|
}
|
|
data.map(x=>{
|
|
x.max = max
|
|
return
|
|
})
|
|
this.forData = data
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
},
|
|
scroll() {
|
|
let offsetHeight = 270;
|
|
if(this.index == this.forData.length - 5){
|
|
this.index = 0
|
|
}else{
|
|
this.index += 1
|
|
}
|
|
$(this.$refs.process).animate({scrollLeft:(offsetHeight * this.index)+'px'})
|
|
|
|
},
|
|
MouseEnter() {//鼠标移入停止滚动
|
|
clearInterval(this.interval);
|
|
},
|
|
MouseLeave() {//鼠标离开继续滚动
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
},
|
|
},
|
|
watch:{
|
|
data:function(){
|
|
clearInterval(this.interval);
|
|
this.init()
|
|
}
|
|
}
|
|
})
|