默认option指令:

    <chart-ring option="option"></chart-ring>
    【必写属性】默认option,参数有限,配置简单

scope中的数据:

    $scope.option = {
        name:'访问来源',       // 标题
        series: [             //【必填】数据值
            {"value":335, "name":"直接访问"},
            {"value":610, "name":"邮件营销"},
            {"value":234, "name":"联盟广告"},
            {"value":1135, "name":"视频广告"},
            {"value":548, "name":"搜索引擎"}
        ],
        backgroundColor: '#f5f5f5', // 背景颜色,默认无背景色
        saveAsImage: false // 是否显示"保存为图片"
    };


增强option指令: <chart-ring option="option" origin="true"></chart-ring> origin="true" : option可以是echarts ring支持的所有属性 scope中的数据: 参考官方文档
响应点击事件指令: <chart-ring option="option" ring-click="onRingClick();" output-data="nodeInfo"></chart-ring> ring-click="onRingClick();": 自定义点击事件 output-data="nodeInfo": 【必写属性】点击处的数据 scope中的数据: $scope.onRingClick = function(){ console.table($scope.nodeInfo); }

如果legend数据太长导致内容重叠,提供三种建议方案: 方案1. 增加图表显示区域的宽高; 方案2. 将origin置为true,通过更全的参数调整渲染布局; 方案3. 将legend隐藏,在图标DOM旁边自定义legendDOM。