本文介绍: 这里我要实现的是前端实现类似加速小球样式内存容量监控图像echart部分代码: &lt;div class=”iboxcontent“&gt; <div class=”echartsid=”main“&gt;</div> </div>js读取后端发来的json数据,js代码(这个放在html的开头): setInterval(function () {

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

 

 

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>

原文地址:https://blog.csdn.net/jumptigerfu/article/details/123235804

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22246.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注