要实现echarts动态曲线图(多条曲线)，一般需要使用setInterval或者setTimeout来不断刷新数据，更新图表，并使用addData方法或dispose等方法来更新数据。具体步骤如下：
1.引入echarts包和动态加载所需的库
<!-- 引入echarts包 -->
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<!-- 动态加载库 -->
<script src="//cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/extension/dataTool.min.js"></script>
2.准备容器和初始化echarts实例
<!-- 容器 -->
<div id="main" style="width: 800px;height:400px;"></div>
<!-- 初始化echarts实例 -->
<script>
var myChart = echarts.init(document.getElementById('main'));
</script>
3.设置图表的配置项和数据源
// 配置项
option = {
// 提示框默认隐藏
tooltip: {
show: false
},
// 图例
legend: {
data: ['曲线一','曲线二']
},
// X轴
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
// Y轴
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
// 曲线1数据
series: [
{
name: '曲线一',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
},
// 曲线2数据
{
name: '曲线二',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}
]
};
// 将配置项设置到图表中
myChart.setOption(option);
4.更新数据源
// 定义曲线1和曲线2的数据
var data1 = [],data2 = [];
// 根据需求更新数据
function getDate() {
// 生成随机数
var now = new Date();
var value1 = Math.random() * 10;
var value2 = Math.random() * 5;
// 添加新数据
data1.shift();
data1.push({
name: +now,
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
Math.round(value1)
]
});
data2.shift();
data2.push({
name: +now,
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
Math.round(value2)
]
});
}
// 设置数据源
setInterval(function () {
getDate();
myChart.setOption({
series: [
{
data: data1
},
{
data: data2
}
]
});
}, 1000);
5.完整的动态曲线图示例
<!DOCTYPE html>
<html>
<head>
<title>echarts动态曲线图(多条曲线)</title>
<meta charset="utf-8">
<!-- 引入echarts包 -->
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<!-- 动态加载库 -->
<script src="//cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/extension/dataTool.min.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 800px;height:400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
// 提示框默认隐藏
tooltip: {
show: false
},
// 图例
legend: {
data: ['曲线一','曲线二']
},
// X轴
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
// Y轴
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
// 曲线1数据
series: [
{
name: '曲线一',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
},
// 曲线2数据
{
name: '曲线二',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}
]
};
// 将配置项设置到图表中
myChart.setOption(option);
// 定义曲线1和曲线2的数据
var data1 = [],data2 = [];
// 根据需求更新数据
function getDate() {
// 生成随机数
var now = new Date();
var value1 = Math.random() * 10;
var value2 = Math.random() * 5;
// 添加新数据
data1.shift();
data1.push({
name: +now,
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
Math.round(value1)
]
});
data2.shift();
data2.push({
name: +now,
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
Math.round(value2)
]
});
}
// 设置数据源
setInterval(function () {
getDate();
myChart.setOption({
series: [
{
data: data1
},
{
data: data2
}
]
});
}, 1000);
</script>
</body>
</html>
另一个动态曲线图示例可以是实时更新股票交易数据，每秒钟刷新一次，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>echarts动态曲线图(多条曲线)</title>
<meta charset="utf-8">
<!-- 引入echarts包 -->
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<!-- 动态加载库 -->
<script src="//cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/extension/dataTool.min.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 800px;height:400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
option = {
title: {
text: '股票交易数据动态曲线图'
},
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
// 图例
legend: {
data:['股票1','股票2']
},
// X轴
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
// Y轴
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
// 曲线1数据
series: [
{
name: '股票1',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
},
// 曲线2数据
{
name: '股票2',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}
]
};
// 将配置项设置到图表中
myChart.setOption(option);
// 定义股票1和股票2的数据
var data1 = [],data2 = [];
// 模拟数据的变化
var base = +new Date();
var oneHour = 3600 * 1000;
// 根据数据源获取新的数据
function getKLineData(data) {
var now = new Date(base += oneHour);
var prices = [];
for (var i = 0; i < 8; i++) {
prices.push(Math.random() * 1000);
}
data.shift();
data.push({
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
prices
]
});
}
// 确定数据刷新的时间间隔
setInterval(function () {
getKLineData(data1);
getKLineData(data2);
myChart.setOption({
series: [
{
data: data1
},
{
data: data2
}
]
});
}, 1000);
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：echarts如何实现动态曲线图(多条曲线) - Python技术站
微信扫一扫 
支付宝扫一扫 