如何在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插件来作为图表的数据,调用后台的数据,让图表“动”起来。

版权声明:
作者:Miigua
链接:https://www.miigua.com/article/315.html
来源:米瓜的博客
文章版权归作者所有,未经允许请勿转载。

THE END
二维码
打赏
请在后台主题设置处设置打赏图片
< <上一篇
下一篇>>