Echarts饼图的使用

效果图

    /**
     * 显示服务器索等信息
     *
     * @param request
     * @param resp
     * @throws IOException
     */
    @RequestMapping(value = "indexSpace")
    public void indexSpace(HttpServletRequest request, HttpServletResponse resp) throws IOException {
        resp.setContentType("text/plain; charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        Map<String, String> map = new HashMap<>();
        map = iConnectServerService.indexSpace();
        PrintWriter out = resp.getWriter();
        out.print(JSONObject.toJSONString(map)); //将map转为json
        out.flush();//清空输出流
        System.out.println(JSONObject.toJSONString(map));
    }

    /**
     * 检查索引空间剩余量
     *
     * @return
     */
    @Override
    public Map<String, String> indexSpace() {
        String test1 = server("df -hi /home", "ip", "账号", "密码");
        String test2 = server("df -hi /home", "ip", "账号", "密码");
        String test3 = server("df -hi /home", "ip", "账号", "密码");

        test1 = checkNode(test1); //获取具体数字
        test2 = checkNode(test2);//获取具体数字
        test3 = checkNode(test3);//获取具体数字

        Map<String, String> map = new HashMap<>();
        map.put("test1", test1);
        map.put("test2", test2);
        map.put("test3", test3);

        return map;
    }

/**
     * 字符串截取
     *
     * @param result
     * @return
     */
    public String checkNode(String result) {
        String xj = result.replaceAll(".*[^\\d](?=(\\d+))", "");
        String regEx = "[^0-9]";
        Pattern p = Pattern.compile(regEx);
        Matcher m = p.matcher(xj);
        String yj = m.replaceAll("").trim();
        System.out.println(yj);
        return yj;
    }

前端echarts

        $.ajax({
                method: 'get',
                url: "${pageContext.request.contextPath}/server/indexSpace",
                success: function (res) {
                    const resp = JSON.parse(res);
                    const test1 = resp["test1"];
                    const test2 = resp["test2"];
                    const test3 = resp["test3"];

                    //图示：圆形
                    // 基于准备好的dom，初始化echarts实例
                   var myChart = echarts.init(document.getElementById('InterfaceAdjustment_sector'), 'echarts-plus');

                    myChart.setOption({

                        title : {
                            text: '',
                            x:'left',
                            textStyle:{
                                color:'#FFFFFF',
                                fontSize:20
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} %"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            top:40,
                            itemWidth:70,
                            itemHeight:30,
                            formatter: '{name}',
                            textStyle:{
                                color: '#FFFFFF'
                            },
                            data:[{name:'test1',icon:'rect'},
                                {name:'test2',icon:'rect'},
                                {name:'test3',icon:'rect'}
                            ]
                        },
                        calculable: true,
                        series: [
                            {
                                name: '索引空间',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '75%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。

                                data: [ // 数据数组，name 为数据项名称，value 为数据项值
                                    {value: test1, name: '11g新云FTP'},
                                    {value: test2, name: '11g测试FTP'},
                                    {value: test3, name: '12C测试FTP'}
                                ]
                            }
                        ]
                    })
                }
            })