定时器实时更新echarts图表[Axure中使用echarts]

原创已于 2023-09-13 14:08:37 修改 · 547 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #前端 #javascript #axure

于 2023-09-13 14:05:49 首次发布

文章详细描述了如何在JavaScript中通过ECharts库创建一个实时更新的曲线图表，包括如何在定时器中初始化ECharts、更新数据和控制图列显示。同时提及了在特定环境（如Axure）中的注意事项。

1.完整例子

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);

var randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
var dataX1 = [];
var dataX2 = [];
var dataX3 = [];
var dataY1 = [];

var options = {
    title: {
        text: '实时曲线',
        subtext: '',
        left: '5%',
        top: '2%',
        textStyle: {
            color: "rgba(204,187,225,0.5)"
        }
    },
    backgroundColor: "#1A1835",
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            textStyle: {
                color: "#fff"
            }
        }
    },
    grid: {
        borderWidth: 0,
        top: 110,
        bottom: 95,
        textStyle: {
            color: "#fff",
            fontSize: 30
        }
    },
    xAxis: {
        name: '时间',
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: "rgba(204,187,225,0.5)"
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            rotate: 40
        },
        data: dataY1
    },
    yAxis: {
        type: 'value',
        scale: true,
        name: '平均值',
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "rgba(204,187,225,0.5)"
            }
        }
    },
    series: [{
        name: "qx1",
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
            color: "#6f7de3"
        },
        data: dataX1
    }, {
        name: "qx2",
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
            color: "#c257F6"
        },
        data: dataX2
    }, {
        name: "qx3",
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
            color: "#42bcbc"
        },
        data: dataX3
    }],
    legend: {
        x: '30%',
        top: '2%',
        textStyle: {
            color: '#90979c',
            fontSize: 20
        },
        data: ['qx1', 'qx2', 'qx3']
    },
    calculable: true
};

function updateChart() {
    var now = new Date();
    var formattedDate = now.toISOString().replace(/T/, ' ').replace(/\..+/, '');

    dataX1.push(randomInteger(1, 100));
    dataX2.push(randomInteger(1, 100));
    dataX3.push(randomInteger(1, 100));
    dataY1.push(formattedDate);

    if (dataX1.length > 10) {
        dataX1.shift();
        dataX2.shift();
        dataX3.shift();
        dataY1.shift();
    }

    options.xAxis.data = dataY1;
    options.series[0].data = dataX1;
    options.series[1].data = dataX2;
    options.series[2].data = dataX3;

myChart.setOption(options);
}
var myChart = null;
setTimeout(()=>{
    var dom = $('[data-label=test]').get(0);
    myChart = echarts.init(dom);
    myChart.setOption(options);
},1000);


setInterval(updateChart, 1000);