一、业务背景

不使用轻分析的情况下，目前开发平台设计器只提供了少量的图表控件，并没有环形图控件，如何画出环形图。

二、思路与方案

方案一：使用高代码的方式，万能的自定义控件

方案二：使用平台提供的【饼图】控件，echarts中的环形图就是饼图，区别在于是否定义圆形内部镂空的半径而已，其属性setRadius可以设置内圆及外圆半径

下面将对方案二实现过程展开详解

三、实现过程

步骤一

创建动态表单（kdec_pie_chart），并添加饼图控件（kdec_piechartap），设置动态表单和控件的【宽度】和【高度】

步骤二

访问echarts示例官网，找到相应的环形图代码：链接地址

步骤三

仿照echarts示例代码，编写插件代码

import kd.bos.dataentity.resource.ResManager;
import kd.bos.form.chart.ItemValue;
import kd.bos.form.chart.PieChart;
import kd.bos.form.chart.PieSeries;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.sdk.plugin.Plugin;
import java.math.BigDecimal;
import java.util.EventObject;
import java.util.HashMap;
import java.util.Map;
public class DemoFormPlugin01 extends AbstractFormPlugin implements Plugin {
    public DemoFormPlugin01() {
    }

    public void afterCreateNewData(EventObject e) {
        super.afterCreateNewData(e);
        PieChart pieChart = this.getControl("kdec_piechartap");
        pieChart.setShowTitle(false);
        pieChart.setShowTooltip(true);
        pieChart.addTooltip("trigger","item");
        pieChart.setShowLegend(true);
//        pieChart.setLegendPropValue("top","1%");
        pieChart.setLegendPropValue("left","center");
        //创建echarts中的series对象 
        PieSeries series = pieChart.createPieSeries(ResManager.loadKDString("Access From", "PieChartCardDemoPlugin_0", "bos-portal-plugin", new Object[0]));
        ItemValue[] items = this.getDefaultProfitData();
        series.setData(items);
        series.setPropValue("name", "Access From");
        series.setPropValue("type", "pie");
        series.setPropValue("avoidLabelOverlap", Boolean.FALSE);
        //设置内圆与外圆半径
        series.setRadius("40%", "70%");
        //构造series子属性
        //itemStyle
        Map map = new HashMap();
        map.put("borderRadius",10);
        map.put("borderColor","#fff");
        map.put("borderWidth",2);
        series.setPropValue("itemStyle", map);
        //label
        map = new HashMap();
        Map normalMap = new HashMap();
        map.put("show", Boolean.FALSE);
        map.put("position", "center");
        series.setPropValue("label", map);
        //labelLine
        map = new HashMap();
        map.put("show", Boolean.FALSE);
        series.setPropValue("labelLine", map);
        //emphasis
        map = new HashMap();
        normalMap = new HashMap();
        map.put("label",normalMap);
        normalMap.put("show",Boolean.TRUE);
        normalMap.put("fontSize",20);
        normalMap.put("fontWeight","bold");
        series.setPropValue("emphasis",map);
    }

    private ItemValue[] getDefaultProfitData() {
        ItemValue[] items = new ItemValue[5];
        ItemValue item1 = new ItemValue("Search Engine", new BigDecimal(1048));
        items[0] = item1;
        ItemValue item2 = new ItemValue("Direct", new BigDecimal(735));
        items[1] = item2;
        ItemValue item3 = new ItemValue("Email", new BigDecimal(580));
        items[2] = item3;
        ItemValue item4 = new ItemValue("Union Ads", new BigDecimal(484));
        items[3] = item4;
        ItemValue item5 = new ItemValue("Video Ads", new BigDecimal(300));
        items[4] = item5;
        return items;
    }
}

四、效果图

五、开发环境版本

不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV6.0.0.1  星瀚版本号 COSMICV6.0.0.1

六、注意事项

这里仿照echarts示例去编写苍穹插件代码的关键点是，不知道如果去构造series里的属性；其实series提供了setPropValue方法可以设置series里的大部分属性；
如series里的emphasis：

通过以下代码构造

map = new HashMap();
normalMap = new HashMap();
map.put("label",normalMap);
normalMap.put("show",Boolean.TRUE);
normalMap.put("fontSize",20);
normalMap.put("fontWeight","bold");
series.setPropValue("emphasis",map);

七、参考资料

开发平台

学习成长中心

条形图