-
先看看效果图，这个线是会动的
动态图.png 话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端适配要加这个meta标签 -->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>折线图动态刷新数据</title>
<!-- 引入 echarts.js -->
<script src="./echarts.min.js"></script>
<!-- <script>
//rem布局
var d = document.documentElement;
var cw = d.clientWidth || 750;
document.documentElement.style.fontSize = (cw / 750 * 100) + 'px';
</script> -->
</head>
<body>
</div>
<!-- 2390px 1400p-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- <div class="row" style="width:7rem;overflow: hidden;"> -->
<div id="main"></div>
<!-- <div id="main2" style="width: 1200px;height:400px;"></div> -->
<!-- </div> -->
<script type="text/javascript">
//自适应屏幕变化
var worldMapContainer = document.getElementById('main');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth + 'px';
worldMapContainer.style.height = window.innerHeight - 200 + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
//可以使用rem进行布局
// function fontSize(rem) {
// var fontSize = document.documentElement.style.fontSize;
// // console.log(fontSize);
// return Math.floor(rem * fontSize.replace('px', ''));
// }
// var font;
// //当前屏幕的宽度大于750，字体为12px,反之为20px
// if (document.documentElement.clientWidth > 750) {
// font = fontSize(0.12);
// } else {
// font = fontSize(0.2);
// }
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var startTime = () => {
return new Date("2020-1-1")
}
var longs = startTime();//时间2020-1-1
var dates = longs.getDate();//当前的天数是1
var xSelf = 7;//基础x轴有几列
var xyanshen = 1;//基础x轴 再往后延伸几列
function clear(now) {//清除定时器
if (now == '60') {
clearInterval(timer);
}
}
function getDate(noss) {
longs.setDate(dates + noss);//设置天数
var dateNowTime = longs.getMonth() + 1 + "月" + longs.getDate() + "日";
longs = startTime();//初始化
return dateNowTime
}
function randomData() {
now = now + 1;//相当于计时器
value = value + Math.random() * 21 - 10;//是Y轴的数据
// console.log(now.toString());
clear(now);
var time = getDate(now - 1);
return {
name: time,//X轴的数据
value: [
time,
Math.floor(Math.random() * 100)
]
}
}
function randomData2() {
value = value + Math.random() * 21 - 10;
clear(now);
var time = getDate(now - 1);
return {
name: time,
value: [
time,
Math.floor(Math.random() * 100)
]
}
}
function randomData3() {
value = value + Math.random() * 21 - 10;
clear(now);
var time = getDate(now - 1);
return {
name: time,
value: [
time,
Math.floor(Math.random() * 100)
]
}
}
var xData = [];
var data = [];//x轴
var data2 = [];
var data3 = [];
var now = +0;
var oneDay = 1;
var value = Math.random() * 1000;//y轴显示的
for (var i = 0; i < xSelf; i++) {
xData.push(getDate(i))
data.push(randomData());
data2.push(randomData2());
data3.push(randomData3());
}
// 给X轴后面多加了一天，突出显示动画的效果
for (var i = 0; i < xyanshen; i++) {
xData.push(getDate(i + xSelf))
}
// console.log(data)
option = {//配置
title: {//标题
text: '折线图堆叠',
// left: 'auto',
textStyle: {
fontSize: 12,
lineHeight: 1
},
padding: [20, 0, 0, 40]
},
tooltip: {//气泡框
trigger: 'axis',
// 相对位置，让气泡框显示的位置
position: ['50%', '30%']
},
grid: {//整体表格往左偏移了一点
top: '16%', // 等价于 y: '16%'
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {//X轴
type: 'category',
axisLabel: {//设置X轴的样式
rotate: 60,//倾斜60度
fontSize: 12
},
// fontSize:'40',
boundaryGap: false,
data: xData,
// nameGap: 200,//间隔
},
yAxis: {
name: '单位/万元',
type: 'value',
nameTextStyle: {//设置name样式
fontSize: 12,
align: 'left',
color: '#ccc'
},
axisLabel: {//设置y轴数据的字体大小
fontSize: 12,
// formatter:'{value}单位/万元'
},
},
series: [//刚开始页面渲染的时候会进行显示，之后才会显示更新后的数据
{
name: '京东',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data,
markLine: {
data: [
[{
symbol: 'none',
x: '85%',
yAxis: data[data.length - 1].value[1]
}, {
symbol: 'circle', //图表标注
label: {
normal: {
position: 'start',
formatter: '京东\n{c}'
}
},
name: '京东',
value: data[data.length - 1].value[1], //当前的数据
xAxis: data[data.length - 1].value[0], //X轴数据
yAxis: data[data.length - 1].value[1] //y轴的数据
}]
]
}
},
{
name: '淘宝',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data2,
markLine: {
data: [
[{
symbol: 'none',
x: '85%',
yAxis: data2[data2.length - 1].value[1]
}, {
symbol: 'circle', //图表标注
label: {
normal: {
position: 'start',
formatter: '淘宝\n{c}'
}
},
name: '淘宝',
value: data2[data2.length - 1].value[1], //当前的数据
xAxis: data2[data2.length - 1].value[0], //X轴数据
yAxis: data2[data2.length - 1].value[1] //y轴的数据
}]
]
}
},
{
name: '天猫',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data3,
markLine: {
data: [
[{
symbol: 'none',
x: '85%',
yAxis: data3[data3.length - 1].value[1]
}, {
symbol: 'circle', //图表标注
label: {
normal: {
position: 'start',
formatter: '天猫\n{c}'
}
},
name: '天猫',
value: data3[data3.length - 1].value[1], //当前的数据
xAxis: data3[data3.length - 1].value[0], //X轴数据
yAxis: data3[data3.length - 1].value[1] //y轴的数据
}]
]
}
}
]
};
var timer = setInterval(function () {//定时器
for (var i = 0; i < 1; i++) {
data.shift();//头删
data.push(randomData());//尾添
xData.shift();
xData.push(getDate(now + xyanshen - 1));
data2.shift();
data2.push(randomData2());
data3.shift();
data3.push(randomData3());
}
myChart.setOption({//设置
legend: {
data: ['单位/万元']
},
series: [{//放多个数据
name: '京东',
type: 'line',
showSymbol: false,
smooth: false, //true 为平滑曲线，false为直线
hoverAnimation: false,
data: data,
markLine: {
data: [
[{
symbol: 'none',
x: '85%',
yAxis: data[data.length - 1].value[1]
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '京东\n{c}',
fontSize: 12
}
},
name: '京东',
value: data[data.length - 1].value[1],
xAxis: data[data.length - 1].value[0],
yAxis: data[data.length - 1].value[1]
}]
]
}
},
{
name: '淘宝',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data2,
markLine: {
data: [
[{
symbol: 'none',
x: '85%',
yAxis: data2[data2.length - 1].value[1]
}, {
symbol: 'circle', //图表标注
label: {
normal: {
position: 'start',
formatter: '淘宝\n{c}',
fontSize: 12
}
},
name: '淘宝',
value: data2[data2.length - 1].value[1], //当前的数据
xAxis: data2[data2.length - 1].value[0], //X轴数据
yAxis: data2[data2.length - 1].value[1] //y轴的数据
}]
]
}
},
{
name: '天猫',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data3,
markLine: {//基准线显示
data: [
[{
symbol: 'none',
x: '85%',//x轴坐标定位
yAxis: data3[data3.length - 1].value[1]
}, {
symbol: 'circle', //图表标注
label: {
normal: {
position: 'start',
formatter: '天猫\n{c}',
fontSize: 12
}
},
name: '天猫',
value: data3[data3.length - 1].value[1], //当前的数据
xAxis: data3[data3.length - 1].value[0], //X轴数据
yAxis: data3[data3.length - 1].value[1] //y轴的数据
}]
]
}
}
]
});
myChart.setOption({//设置X轴更新
xAxis: {
data: xData
}
});
}, 1000);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {//监听页面窗口的变化
myChart.resize();//横向自适应
resizeWorldMapContainer(); //高低自适应
});
</script>
</body>
</html>
- 希望能帮助到你，不理解的可以评论区留言，看到就会回复！
