//动态数据+时间坐标轴
<template>
<div class="demo6 echart-box" ref="myechart" id="main"></div>
</template>
<script>
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
Math.round(value)
]
};
}
var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
export default {
name: "demo6",
data() {
return {};
},
mounted: function() {
let myChart = this.$echarts.init(document.getElementById("main"));
//这个是第二种引用方法，必须先进行声明
let option = {
title: {
text: "动态数据 + 时间坐标轴"
},
tooltip: {
trigger: "axis",
formatter: function(params) {
params = params[0];
var date = new Date(params.name);
return (
date.getDate() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getFullYear() +
" : " +
params.value[1]
);
},
axisPointer: {
animation: false
}
},
xAxis: {
type: "time",
splitLine: {
show: false
}
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
splitLine: {
show: false
}
},
series: [
{
name: "模拟数据",
type: "line",
showSymbol: false,
hoverAnimation: false,
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function() {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
//在这个方法中定义的图表变量必须把这个方法放到可以检查出来的地方
myChart.setOption({
series: [
{
data: data
}
]
//在执行方法的时候重新给它一个值
});
}, 1000);
}
};
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.demo6 {
1000px;
height: 600px;
background: #cce6f0;
/* margin: 0 auto; */
}
</style>
ps:
数据引入方式有三种，一种之前提到过，今天是第二种，还有一种是外链直接引入