echart实现定时自动刷新数据

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

 

 

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    //文字大小
                        }
                    },
                    graphic: [
                        // {
                        //     type:"text",
                        //     left:"center",
                        //     top:"40%",
                        //     style:{
                        //         text:"",
                        //         textAlign:"center",
                        //         fill:"#333",
                        //         fontSize:20,
                        //         fontWeight:700
                        //     }
                        //
                        //
                        // }
                    ],
                    //圆环的颜色
                    color: ['#26d7cd', '#e0dcdc', '#11abff', '#ffdf6f', '#968ade'],
                    // 图例
                    legend: {
                        // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
                        selectedMode: false,
                        /* orient: 'vertical', */
                        /*  x : 'right',   //图例显示在右边
                         y: 'center',  */  //图例在垂直方向上面显示居中
                        bottom: 0,
                        itemWidth: 10,  //图例标记的图形宽度
                        itemHeight: 10, //图例标记的图形高度
                        data: ['已用内存空间', '剩余内存空间'],
                        textStyle: {    //图例文字的样式
                            color: '#A6A8B6',  //文字颜色
                            fontSize: 10    //文字大小
                        }
                    },
                    series: [
                        {
                            name: '内存使用',//代表a的值，系列名称
                            type: 'pie',
                            center: ['50%', '45%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                            radius: ['45%', '60%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
                            avoidLabelOverlap: false,

                            label: {
                                normal: {
                                    show: true,//是否显示标签标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                                    position: 'left',
                                    //显示的标签的内容
                                    //a（系列名称），b（数据项名称），c（数值）, d（百分比）
                                    formatter: "{a},{b}:{c}（{d}%）",

                                },
                                emphasis: {
                                    //鼠标放在圆环上显示的标签样式
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,//是否显示引导线
                                    length: 10,  //百分比引导线
                                    length2: 20    //视觉引导项第二段的长度。
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "#FFFFFF",
                                    borderWidth: 1,
                                    label: {
                                        show: true,
                                        formatter: '{d}%'
                                    },
                                }
                            },
                            // 系列中的数据内容数组。
                            data: [
                                {value: 0, name: '已用内存空间'},
                                {value: 100, name: '剩余内存空间'},

                            ]

                        }]
                }
            )

        }

//这个是每次刷新的函数 只加载数据 不加载其他的东西

        function PieChart() {
            $.ajax(
                {
                    url: "/MonitorEchart",
                    type: "POST",
                    async: true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (res) {
                        // alert(res['MemoryUse_Total']);
                        option = {

                            series: [
                                {
                                    // 系列中的数据内容数组。
                                    data: [
                                        {value: res["MemoryUse_Used"], name: '已用内存空间'},
                                        {value: res["MemoryUse_Free"], name: '剩余内存空间'},

                                    ]
                                }
                            ]
                        };
                        myChart.setOption(option);


                    }
                }
            )
        }

html尾部再加上: 

Ps:这个必须得在末尾声明 不然会加载不出来图表或者每次显示都会重新加载

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
         // console.log("2222");

</script>