echart实现定时自动刷新数据

jumptigerfu

已于 2022-03-02 17:45:10 修改

阅读量6.6k

点赞数 6

分类专栏： echart 文章标签： echarts ajax flask javascript

于 2022-03-02 17:43:36 首次发布

本文链接：https://blog.csdn.net/jumptigerfu/article/details/123235804

版权

该博客介绍如何使用Echarts在前端实现一个类似加速小球效果的内存容量监控图表。通过设置动画、饼图样式和数据更新，实现每秒从后端获取并展示内存使用情况，包括已用内存和剩余内存的空间占比。示例代码中包含初始化图表、数据加载和动态刷新数据的函数。

摘要由CSDN通过智能技术生成

这里我要实现的是前端实现类似加速小球样式的内存容量监控图像

echart部分代码:

 <div class="ibox-content">
                    <div class="echarts" id="main"></div>

                </div>

js读取后端发来的json数据,js代码(这个放在html的开头):

        setInterval(function () {
            PieChart();
        }, 1000);//每隔1秒执行每次刷新数据的函数
        $(function () {
           
            PieChartFirst();
  
        })


          //这个是预加载 把饼图的框架加载出来
        function PieChartFirst() {
            // var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(
                {
                    animation: false,  //是否禁用动画效果
                    title:
                        {//标题组件
                        textStyle: {
                            color: "#333333",
                            fontSize: 12,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c}M ({d}%)",
                        textStyle: {    //图例文字的样式
                            color: '#fff',  //文字颜色
                            fontSize: 10    //文字大小