//动态数据+时间坐标轴
<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 {
//toString()函数用于将当前对象以字符串的形式返回
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]
);
},
//改完以后X轴右下角有变化
axisPointer: {
animation: false
}
},
xAxis: {
type: "time",
//坐标轴在 grid 区域中的分隔线。
splitLine: {
show: true
}
},
yAxis: {
type: "value",
//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
boundaryGap: [0, "100%"],
//坐标轴在 grid 区域中的分隔线。
splitLine: {
show: true
}
},
series: [
{
name: "模拟数据",
type: "line",
//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
showSymbol: false,
//是否开启 hover 在拐点标志上的提示动画效果。
hoverAnimation: false,
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function() {
for (var i = 0; i < 5; i++) {
//shift函数是数组原来的第一个元素的值。
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>