99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
|
<el-card shadow="hover" header="实时收入" v-loading="loading">
|
|
<xEcharts ref="c1" height="300px" :option="option"></xEcharts>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import xEcharts from '@/components/xEcharts';
|
|
|
|
export default {
|
|
title: "实时收入",
|
|
icon: "el-icon-data-line",
|
|
description: "Echarts组件演示",
|
|
components: {
|
|
xEcharts
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
option: {}
|
|
}
|
|
},
|
|
created() {
|
|
var _this = this;
|
|
setTimeout(function() {
|
|
_this.loading = false
|
|
}, 500);
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
boundaryGap: false,
|
|
type: 'category',
|
|
data: (function (){
|
|
var now = new Date();
|
|
var res = [];
|
|
var len = 30;
|
|
while (len--) {
|
|
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
|
|
now = new Date(now - 2000);
|
|
}
|
|
return res;
|
|
})()
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '价格',
|
|
"splitLine": {
|
|
"show": false
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name: '收入',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#409EFF'
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.1,
|
|
color: '#79bbff'
|
|
},
|
|
data: (function (){
|
|
var res = [];
|
|
var len = 30;
|
|
while (len--) {
|
|
res.push(Math.round(Math.random() * 0));
|
|
}
|
|
return res;
|
|
})()
|
|
},
|
|
],
|
|
};
|
|
this.option = option;
|
|
|
|
},
|
|
mounted(){
|
|
var _this = this;
|
|
setInterval(function (){
|
|
var o = _this.option;
|
|
|
|
o.series[0].data.shift()
|
|
o.series[0].data.push(Math.round(Math.random() * 100));
|
|
|
|
o.xAxis.data.shift();
|
|
o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
|
|
|
|
|
|
//_this.$refs.c1.myChart.setOption(o)
|
|
},2100)
|
|
|
|
},
|
|
}
|
|
</script>
|