html，Ajax，echarts绘制雷达图

最新推荐文章于 2023-05-20 22:51:41 发布

可乐鸡翅呀

最新推荐文章于 2023-05-20 22:51:41 发布

阅读量786

点赞数

文章标签： echarts html ajax

本文链接：https://blog.csdn.net/wxl217X/article/details/126713428

版权

ajax接收json数组并绘制雷达图

1.引入库文件（本例采用直接下载到项目根目录下）
echarts.js和jQuery.js放入head

<head>
    <meta charset="UTF-8">
    <title>JQuery Ajax Test</title>
    <script src="echarts.js"></script>
    <script src="jQuery.js"></script>
</head>

2.echarts制图

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="width: 600px; height: 500px;"></div>
<script>
    var arr1=[],arr2=[],arr3=[];

    function arrTest(){
//这个功能块的作用就是读取json数据。
        $.ajax({

            type:"post",//请求服务器载入数据

            async:false,//异步属性

            url:"上篇文章PHP文件名.php",

            data:{},

            dataType:"json",

            success:function(result){

                if (result) {

                    for (var i = result.length-3; i < result.length-2; i++) { //取倒数第三行数据，自行修改取哪行数据

                        arr1.push(result[i].O1_1);
                        arr1.push(result[i].O1_2);
                        arr1.push(result[i].O1_3);//这边更新字段，可以只写你需要展示的字段。

                    }
                    for (var i = result.length-2; i < result.length-1; i++) { //取倒数第二行数据，期望达成度

                        arr2.push(result[i].O1_1);
                        arr2.push(result[i].O1_2);
                        arr2.push(result[i].O1_3);//这边更新字段，可以只写你需要展示的字段。
                        
                    }

                }

            },error: function(errmsg) {
                alert("Ajax获取服务器数据出错了！"+ errmsg);}

        })

        return arr1,arr2;

    }
    arrTest();

    // 初始化 图表对象，放入对应的DOM
    var myChart = echarts.init(document.getElementById('container'));

    // 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
    var option = {

        title: {

            text: '我是小趴菜',
            left: "center",
            textStyle: {
                fontSize: 20  //标题字体大小
            },

        },

//Bootstrap 提示工具(Tooltip)插件,鼠标悬停时候的提示框

        emphasis: {
            label: {
                show: true,
                formatter: '{c}%',//查阅echarts官网的配置项手册
            }
        },


//关闭动画效果,导出图片需要
        animation: false,

//图例

        legend: {
            orient: 'horizontal',
            bottom: "1%",
            data: ["全年级", "期望达成度"]

        },

        radar: {
            // shape: 'circle',
            splitNumber: 5, // 雷达图圈数设置
            indicator: [
                {
                    name: 'O1_1', max: 100,
                    //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在O1_1这条indicator上显示
                    axisLabel: {
                        show: true,
                        formatter: '{value}%',
                        fontSize: 12,
                        color: '#838D9E',
                        showMinLabel: true, //显示最小数字，即中心点显示0
                    },
                },
                {name: 'O1_2', max: 100},
                {name: 'O1_3', max: 100}
            ]
        },
        series: [

            {

                "type": "radar",//雷达图

                data: [
                    {
                        value: arr1,
                        name: '全年级',
                        //这里的配置显示数值
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                formatter: '{c}%'
                            }
                        }
                    },
                    {
                        value: arr2,
                        name: '期望达成度',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%'
                            }
                        }
                    }
                ]

            }
        ]

    };

    // 为echarts对象加载数据

    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }else {
        alert("出错了！"+ errmsg);
    }

    //获取echarts图表的base64地址
    var baseImage = myChart.getDataURL();
    //将生成的base64传到后端保存起来
    if(baseImage) {
        $.ajax({
            url: "下篇文章php文件名.php?action=save",
            type: 'post',
            async: true,

            data: {baseimg: baseImage},
            success: function(data) {

                console.log(baseImage);

            }
        });
    }

</script>