Echarts动态生成sin曲线

晨之清风

已于 2024-08-28 16:59:31 修改

阅读量1.1k

点赞数

分类专栏： echarts 文章标签： echarts sin曲线

于 2020-12-04 09:28:21 首次发布

本文链接：https://blog.csdn.net/chentuo2000/article/details/110622403

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

陈拓 2020/12/03-2020/12/04

1. 动态生成sin曲线

1.1 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,
        type: 'line'
    }]
};

setInterval(function () {;
    addData(true); // 生成数据并左移
    myChart.setOption(option);
}, 500); // 500ms刷新一次
        </script>
    </body>
</html>

1.2 在浏览器中的效果图

2. 静态sin图

2.1 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;

function func(x) {
    x /= 10;
    return Math.sin(x)  * 10;
}

function generateData() {
    let data = [];
    for (let i = -200; i <= 200; i += 0.1) {
        data.push([i, func(i)]);
    }
    return data;
}

option = {
    animation: false,
    grid: {
        top: 40,
        left: 50,
        right: 40,
        bottom: 50
    },
    xAxis: {
        name: 'x',
        minorTick: {
            show: true
        },
        minorSplitLine: {
            show: true
        }
    },
    yAxis: {
        name: 'y',
        min: -100,
        max: 100,
        minorTick: {
            show: true
        },
        minorSplitLine: {
            show: true
        }
    },
    dataZoom: [{ // 缩放功能，可以拖动曲线
        show: true,
        type: 'inside',
        filterMode: 'none',
        xAxisIndex: [0], // 0表示第一个x轴，这里只有一个x轴
        startValue: -150,
        endValue: 150
    }, {
        show: true,
        type: 'inside',
        filterMode: 'none',
        yAxisIndex: [0], // [0]表示第一个y轴，这里只有一个y轴
        startValue: -10, 
        endValue: 10
    }],
    series: [
        {
            type: 'line',
            showSymbol: false,
            clip: true,
            data: generateData()
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>