如何实现雷达图展示原创
金蝶云社区-丨Nick丨
丨Nick丨
5人赞赏了该文章 1425次浏览 未经作者许可,禁止转载编辑于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");//刷新控件


四、效果图

image.png

五、开发环境版本

4.0及以上

六、注意事项

代码的书写调试

七、参考资料

参考资料:

https://echarts.apache.org/examples/zh/editor.html?c=radar-multiple

https://echarts.apache.org/examples/zh/editor.html?c=radar 

赞 5