如何实现雷达图展示原创
6人赞赏了该文章
1,771次浏览
编辑于2022年04月16日 09:47:23
关键词:雷达图
一、需求
实现雷达图以及tips
二、思路与方案
参考echarts案例代码
三、实现过程
代码:
RadarChart chart = this.getControl("kdec_radarchartap"); RadarAxis radarAxis = new RadarAxis();// 构建轴 List<RadarIndicator> indicators = new ArrayList<RadarIndicator>(); RadarIndicator indicator1 = new RadarIndicator("Sales",6500); RadarIndicator indicator2 = new RadarIndicator("Administration",16000); RadarIndicator indicator3 = new RadarIndicator("Information Technology",30000); RadarIndicator indicator4 = new RadarIndicator("Customer Support",38000); RadarIndicator indicator5 = new RadarIndicator("Development",52000); RadarIndicator indicator6 = new RadarIndicator("Marketing",25000); indicators.add(indicator1); indicators.add(indicator2); indicators.add(indicator3); indicators.add(indicator4); indicators.add(indicator5); indicators.add(indicator6); radarAxis.setIndicator(indicators);// 设置轴线 chart.addRadarAxis(radarAxis); RadarSeries radarSeries = new RadarSeries(); RadarData radarData = new RadarData();//构建数据 radarData.setName("Allocated Budget");//数据一 radarData.setValue(new Number[] {4200, 3000, 20000, 35000, 50000, 18000}); Map<String, Object>tooltip = new HashMap<String, Object>(); tooltip.put("trigger", "item"); RadarData radarData1 = new RadarData(); radarData1.setName("Actual Spending");//数据二 radarData1.setValue(new Number[] {5000, 14000, 28000, 26000, 42000, 21000}); radarSeries.addData(radarData); radarSeries.addData(radarData1); radarSeries.setPropValue("tooltip", tooltip);//设置tips chart.addRadarSeries(radarSeries); chart.refresh(); chart.setShowTooltip(true);//开启tips this.getView().updateView("kdec_radarchartap");//刷新控件
四、效果图
五、开发环境版本
4.0及以上
六、注意事项
代码的书写调试
七、参考资料
参考资料:
https://echarts.apache.org/examples/zh/editor.html?c=radar-multiple
DemoRadarPlugin.zip(1.07KB)
赞 6
6人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读