<template>
<div id="Flow" ref="flow"></div>
</template>
<script>
// 先引入Vue-echarts
import * as echarts from "echarts";
export default {
// 当前页面的名字，用于路由跳转以及keep-live缓存
name: 'pagename',
// 接收父组件传来的数据
props: {},
// mixin混入后注册使用
mixins: [],
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
timer: null,
// 折线图实例
myChart: {},
time: {},
dataOne: {},
dataTwo: {},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
// 过滤
filters: {},
//方法集合
methods: {
getdataall () {
},
// echarts 图形
init () {
let vm = this;
const time = (() => {
let now = new Date();
let res = [];
let len = 16;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(+now - 2000);
}
return res;
})();
const dataOne = (() => {
let res = [];
let len = 16;
while (len--) {
res.push(0);
}
return res;
})();
const dataTwo = (() => {
let res = [];
let len = 16;
while (len--) {
res.push(0);
}
return res;
})();
// 使用刚指定的配置项和数据显示图表。
let option = {
animation: true,
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
// 处理过的显示值
// formatter: function (params, ticket, callback) {
// let htmlStr = '';
// let valMap = {};
// for (let i = 0; i < params.length; i++) {
// let param = params[i];
// let xName = param.name; //x轴的名称
// let seriesName = param.seriesName; //图例名称
// let value = param.value; //y轴值
// let color = param.color; //图例颜色
// let last = ''; //单位
// //过滤无效值
// if (value == '-') {
// continue;
// }
// //过滤重叠值
// if (valMap[seriesName] == value) {
// continue;
// }
// if (i === 0) {
// htmlStr += xName + '<br/>'; //x轴的名称
// }
// if (value === 0) {
// last = value + ' ' + 'B/s';
// htmlStr += '<div>';
// //为了保证和原来的效果一样，这里自己实现了一个点的效果
// htmlStr +=
// '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
// color +
// ';"></span>';
// //圆点后面显示的文本
// htmlStr += `${seriesName} <span style="margin-left:20px"></span> <b>${last}</b>`;
// htmlStr += '</div>';
// valMap[seriesName] = value;
// } else {
// let k = 1024;
// let sizes = [
// 'B/s',
// 'KB/s',
// 'MB/s',
// 'GB',
// 'TB',
// 'PB',
// 'EB',
// 'ZB',
// 'YB'
// ];
// let is = Math.floor(Math.log(value) / Math.log(k));
// last = (value / Math.pow(k, is)).toPrecision(3) + ' ' + sizes[is];
// htmlStr += '<div>';
// //为了保证和原来的效果一样，这里自己实现了一个点的效果
// htmlStr +=
// '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
// color +
// ';"></span>';
// //圆点后面显示的文本
// htmlStr += `${seriesName} <span style="margin-left:20px"></span> <b>${last}</b>`;
// htmlStr += '</div>';
// valMap[seriesName] = value;
// }
// }
// return htmlStr;
// }
},
legend: {},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: time,
axisTick: {
show: false
},
axisPointer: {
show: true,
type: 'line',
lineStyle: {
type: 'dashed'
}
}
}
],
yAxis: [
{
type: 'value',
scale: true,
boundaryGap: [0, '100%'],
// 刻度处理后的值
// axisLabel: {//坐标轴刻度标签的相关设置。
// formatter: function (value, index) {
// let last = '';
// if (parseFloat(value) === 0) return '0 B/s';
// if (value < 1) {
// last = value + ' ' + 'B/s';
// return last;
// } else {
// let k = 1024;
// let sizes = ['B/s', 'KB/s', 'MB/s', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
// let is = Math.floor(Math.log(value) / Math.log(k));
// last = (value / Math.pow(k, is)).toFixed(2) + ' ' + sizes[is];
// return last;
// }
// }
// },
axisLine: {
show: false
},
axisTick: {
show: false
}
// 鼠标移上去显示处理过的值
// axisPointer: {
// show: true,
// type: 'line',
// lineStyle: {
// type: 'dashed'
// },
// label: {
// formatter: function (value, index) {
// let last = '';
// if (parseFloat(value.value) === 0) return '0 B/s';
// if (value.value < 1) {
// last = value.value + ' ' + 'B/s';
// return last;
// } else {
// let k = 1024;
// let sizes = [
// 'B/s',
// 'KB/s',
// 'MB/s',
// 'GB',
// 'TB',
// 'PB',
// 'EB',
// 'ZB',
// 'YB'
// ];
// let is = Math.floor(Math.log(value.value) / Math.log(k));
// last =
// (value.value / Math.pow(k, is)).toFixed(2) + ' ' + sizes[is];
// return last;
// }
// }
// }
// }
}
],
series: [
{
name: '上行速度',
type: 'line',
showSymbol: false,
symbol: 'none',
itemStyle: {
normal: {
color: '#0cca8e'
}
},
data: dataOne
},
{
name: '下行速度',
type: 'line',
showSymbol: false,
symbol: 'none',
itemStyle: {
normal: {
color: '#feba47'
}
},
data: dataTwo
}
]
}
setInterval(function () {
let nowTime = new Date().toLocaleTimeString().replace(/^\D*/, '');
time.push(nowTime);
dataOne.shift();
dataOne.push(Math.round(Math.random() * 10000));
dataTwo.shift();
dataTwo.push(Math.round(Math.random() * 10000));
time.shift();
myChart.setOption({
xAxis: [
{
data: time
}
],
series: [
{
data: dataOne
},
{
data: dataTwo
}
]
});
}, 2100);
vm.myChart.setOption(option,)
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created () { },
//生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
// 初始化渲染折线图
this.myChart = echarts.init(this.$refs.flow);
this.init();
this.getdataall();
},
beforeCreate () { }, //生命周期 - 创建之前
beforeMount () { }, //生命周期 - 挂载之前
beforeUpdate () { }, //生命周期 - 更新之前
updated () { }, //生命周期 - 更新之后
beforeDestroy () {
// 离开就清除定时器
// clearInterval(this.timer);
// this.timer = null;
}, //生命周期 - 销毁之前
destroyed () { }, //生命周期 - 销毁完成
activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
#Flow {
min-height: 300px;
}
</style>
暂无评论