如何在jpress上添加分类雷达统计图（一）？

最近为自己的博客添加了一个分类雷达统计图，博客是基于jpress的，前端使用echarts来进行绘制图表，最终以jpress插件的形式来进行打包，直接在后台安装就可以使用了，另外，jpress做插件开发真的是非常简单快捷，有兴趣的小伙伴推荐阅读《如何从零开发一个jpress的友情链接插件（附插件下载地址）》。

我们先看一下整体效果预览图（你也可以点击本站导航栏的“饼状图”图表来查看最终效果）：

我们首先要把前端页面做好，然后再调用后台数据去让图表动起来，我们新建一个html文件，然后引入echarts.js，如下：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

然后写一个div作为容器：

<div id="japressCategoryRadar" style="width: 400px ; height: 250px"></div>

通过调试以及查阅相关的echarts文档，最终图表代码如下：

<script type="text/javascript">
    function showJapressCategoryRadar(){
        var mydata = [];
        mydata.push( {name:"Spring Cloud",value:6},  {name:" jpress教程",value:5},  {name:"记录笔记",value:5},  {name:"jpress免费主题模板",value:2},  {name:"CSS",value:2},  {name:"jpress插件",value:1},  {name:"Java",value:1},  {name:"jpress主题模板",value:0}, );
        var max = 0;
        for (var i = 0 ; i < mydata.length ; i++){
            var d = mydata[i];
            if(d.value > max) max = d.value;
        }
        var indicatorData = [];
        var seriesData = [];
        for (var i = 0 ; i < mydata.length ; i++){
            var d = mydata[i];
            indicatorData.push({name:d.name , max:max});
            seriesData.push(d.value);
        }
        var chartDom = document.getElementById('japressCategoryRadar');
        var myChart = echarts.init(chartDom);
        var option = {
            tooltip: {},
            radar: {
                top: 0,
                name: {
                    textStyle: {
                        color: color3
                    }
                },
                indicator: indicatorData,
                center: ["50%", "50%"],
                radius: "66%"
            },
            series: [{
                type: "radar",
                color: ["#3ecf8e"],
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        }
                    }
                },
                data: [{
                    value: seriesData,
                    name: "文章分类数量"
                }]
            }]
        };
        option && myChart.setOption(option);
    }
    showJapressCategoryRadar();
</script>

到这里，已经实现了静态的雷达图展示，在下一节我们编写一个jpress插件来作为图表的数据，调用后台的数据，让图表“动”起来。