'自动更新图表日期'
parent
865f7d53d0
commit
aa05136933
|
@ -18,13 +18,13 @@
|
||||||
<span>语言详情</span>
|
<span>语言详情</span>
|
||||||
</div>
|
</div>
|
||||||
Vue
|
Vue
|
||||||
<el-progress :percentage="57.2" color="#42b983"></el-progress>
|
<el-progress :percentage="71.3" color="#42b983"></el-progress>
|
||||||
JavaScript
|
JavaScript
|
||||||
<el-progress :percentage="29.8" color="#f1e05a"></el-progress>
|
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>
|
||||||
CSS
|
CSS
|
||||||
<el-progress :percentage="11.9"></el-progress>
|
<el-progress :percentage="3.7"></el-progress>
|
||||||
HTML
|
HTML
|
||||||
<el-progress :percentage="1.1" color="#f56c6c"></el-progress>
|
<el-progress :percentage="0.9" color="#f56c6c"></el-progress>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
|
@ -92,12 +92,12 @@
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<schart ref="bar" class="schart" canvasId="bar" :data="data1" type="bar" :options="options"></schart>
|
<schart ref="bar" class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<schart ref="line" class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
|
<schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2"></schart>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
@ -136,7 +136,7 @@
|
||||||
status: true,
|
status: true,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
data1: [{
|
data: [{
|
||||||
name: '2018/09/04',
|
name: '2018/09/04',
|
||||||
value: 1083
|
value: 1083
|
||||||
},
|
},
|
||||||
|
@ -201,6 +201,7 @@
|
||||||
this.$refs.bar.renderChart();
|
this.$refs.bar.renderChart();
|
||||||
this.$refs.line.renderChart();
|
this.$refs.line.renderChart();
|
||||||
})
|
})
|
||||||
|
this.changeDate();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
collapse(){
|
collapse(){
|
||||||
|
@ -209,6 +210,15 @@
|
||||||
this.$refs.line.renderChart();
|
this.$refs.line.renderChart();
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeDate(){
|
||||||
|
const now = new Date().getTime();
|
||||||
|
this.data.forEach((item, index) => {
|
||||||
|
const date = new Date(now - (6 - index) * 86400000);
|
||||||
|
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue