默认option指令:<chart-gauge option="option"></chart-gauge> 【必写属性】默认option,参数有限,配置简单
scope中的数据:$scope.option = { series:{ //【必填】驱动数据 name: '业务指标', data: {value: 45, name: '完成率'} }, backgroundColor: '#f5f5f5', // 背景颜色,默认无背景色 saveAsImage: false // 是否显示"保存为图片" };
增强option指令:<chart-gauge option="option" origin="true"></chart-gauge> origin="true" : option可以是echarts gauge支持的所有属性
scope中的数据: 参考官方文档
响应点击事件指令:<chart-gauge option="option" gauge-click="onGaugeClick();" output-data="nodeInfo"></chart-gauge> gauge-click="onGaugeClick();": 自定义点击事件 output-data="nodeInfo": 【必写属性】点击处的数据
scope中的数据: $scope.onGaugeClick = function(){ console.table($scope.nodeInfo); }
如果legend数据太长导致内容重叠,提供三种建议方案: 方案1. 增加图表显示区域的宽高; 方案2. 将origin置为true,通过更全的参数调整渲染布局; 方案3. 将legend隐藏,在图标DOM旁边自定义legendDOM。