如何在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
来源:米瓜的博客
文章版权归作者所有,未经允许请勿转载。
全部评论