没有合适的资源?快使用搜索试试~ 我知道了~
ECharts用JavaScript动态生成sin曲线
需积分: 5 0 下载量 191 浏览量
2024-08-19
09:35:08
上传
评论
收藏 64KB DOCX 举报
温馨提示
在ECharts中使用JavaScript可以轻松生成多种曲线,本文演示了怎样用ECharts动态的生成sin曲线。 在文中的代码中,首先通过循环生成 sin 函数的值作为数据点,然后配置 x 轴和 y 轴以及图表类型,最后使用 setOption 方法将配置应用到图表上,从而动态生成 sin 曲线。
资源推荐
资源详情
资源评论
1
Echarts 动态生成 sin 曲线
陈拓 2020/12/03-2020/12/03
HTML 页面和 js 程序
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="position:absolute; left:400px; top:100px;
height:400px; width:600px;"></div>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var x_axis = [];
var x_data = 0;
var y_axis = [];
var y_data = 0;
var angle = 0;
// 计算三角函数
function sin_data(x) {
return Math.sin(x*Math.PI);
}
// 生成 x 轴和 y 轴数据
function addData(shift) {
x_data++;
x_axis.push(x_data);
y_data = 10*sin_data(angle);
y_axis.push(y_data);
angle+=0.1;
if (shift) {
x_axis.shift();
y_axis.shift();
}
}
// 生成 100 个数据,初始化 x_axis 和 y_axis 数组,数组的长度在这里被设置成 100
for (var i = 0; i < 100; i++) {
addData(false);
}
option = {
xAxis: {
type: 'category',
data: x_axis
},
yAxis: {
type: 'value'
},
series: [{
data: y_axis,
资源评论
晨之清风
- 粉丝: 2901
- 资源: 59
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于MATLAB软件车牌定位系统【GUI界面版本】.zip
- 基于MATLAB软件 GUI界面软件设计【GUI界面版本】.zip
- qt-everywhere-src-6.8.0.tar.xz
- 基于MATLAB人体行为识别源码面板GUI.zip
- springboot + layuiadmin 构建的单体后台管理系统
- 高性能计算导论课件 5G移动通信关键技术 共58页.pptx
- React怎么创建虚拟dom和挂载到页面
- openjdk 1.8 带debug调试信息版本,可以查看标准库调试信息,在windows上运行 解压缩后直接使用
- 基于springboot开发的数据库文档生成工具.zip
- 虚拟化学实验室.apk
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功