在demo中的电网信息监控报表中，有如下的单指标柱图。
这种单指标柱图的特点是：有两个扇区，其中一个扇区的颜色偏暗；另一个扇区颜色偏亮，此扇区标志唯一的一个指标数据。并且圆环图中心显示数据值。
此文档提供如何实现此类单指标柱图。本文中示例如下：
注：此示例中涉及到宏代码，宏代码仅供参考。
1.创建数据集
创建数据集，查询出数据，比如此示例中的数据为0.53，另外，由于整个圆环是一个整体，有两个扇区，那么还需要构造一条数据：0.47，与指标数据0.53合起来为1。预览如下：
2.创建图形
基于上述步骤的数据集创建仪表分析或者电子表格，图形选择“标准环形图”
勾选X轴和Y轴
显示效果如下：
3.设置扇区颜色
打开图形设置界面，切换到“扩展属性”页签，输入如下扩展属性，设置两个扇区的颜色
{
"color": ["#C23531", "#F6DBDA"]
}
4.隐藏图例
打开图形设置界面，切换到“图例”页签下，选择“不显示图例”
如下：
5.通过宏代码设置中心位置显示数值
保存报表，并在报表上右键-》编辑宏，新建客户端模块。选择对象 Chart，选择事件beforeRender，并将以下示例代码拷贝到代码区。
| 类型 | 对象 | 事件 |
|---|---|---|
| 客户端模块 | Chart | beforeRender |
function main(chartView) {
var chart = chartView.getChartObject();
var option = chart.getOptions();
var series = option.series;
if(!series){
return;
}
var showDataIndex = 0; // 要显示的数据在第一行，所以为0，如果数据在第二行，此处应为1
for (var i = 0, len = series.length; i < len; i++) {
var seriesItem = series[i];
var labelNormal = seriesItem.label && seriesItem.label.normal;
if (labelNormal) {
seriesItem.avoidLabelOverlap = false;
labelNormal.show = true;
labelNormal.position = 'center';
labelNormal.textStyle = {
color: '#000000', //设置标签显示颜色
fontSize: 20 //设置标签字体大小
},
labelNormal.formatter = function(params) {
debugger;
var dataIndex = params.dataIndex;
if (dataIndex == showDataIndex) {
return params.percent + '%'; //设置标签内容,params.percent可以获取到数据的占比，params,value可以获取到数据的值
} else {
return '';
}
};
}
}
} |
另外，也可以使用下面的宏代码实现。两种宏代码取其一即可，没有什么区别。
| 类型 | 对象 | 事件 |
|---|---|---|
| 客户端模块 | Chart | afterRender |
function main(chartView) {
var echarts = chartView.getChartObject();
var option = echarts.getOptions();
if(!option.series){
return;
}
var Vdata = option.series[0].data[0].value;
//通过增加一个圆环来实现中心的文字，中心的文字显示的是"合计：数值的合计值"
var obj = {};
obj.data = [1];
obj.type = 'pie';
obj.radius = ['0%', '40%'];
obj.avoidLabelOverlap = true;
obj.tooltip = {
show: false
}
obj.itemStyle = {
normal: {
color: '#FFFFFF' //设置圆的颜色
}
}
obj.label = {
normal: {
show: true,
position: 'center',
formatter: '' + Vdata * 100 + '%', //设置数据标签显示的内容
textStyle: {
fontSize: 20, //设置标签字体大小
color: '#000000' //设置标签字体颜色
}
}
};
option.series.push(obj);
var pie = echarts.getChart();
pie.setOption(option);
var option2 = pie.getOption();
} |
通过上述的宏代码，也可以实现下面的圆环图。在圆环图中间加一些文字，如下，中间的圆中显示了所有类别的合计值。
设置步骤如下：
1.正常创建圆环图，如下：
2.在报表上右键-》编辑宏，进入报表宏界面
新建客户端模块，对象选择Chart，事件选择afterRender。并将下面的宏代码拷贝到宏代码区域
| 类型 | 对象 | 事件 |
|---|---|---|
| 客户端模块 | Chart | afterRender |
function main(chartView) {
var echarts = chartView.getChartObject();
var option = echarts.getOptions();
if(!option.series){
return;
}
var sum = getSum(option.series[0].data); //计算合计值
//通过增加一个圆环来实现中心的文字，中心的文字显示的是"合计：数值的合计值"
var obj = {};
obj.data = [1];
obj.type = 'pie';
obj.radius = ['0%', '40%'];
obj.avoidLabelOverlap = true;
obj.tooltip = {
show: false
}
obj.itemStyle = {
normal: {
color: '#7D94A6' //设置圆的颜色
}
}
obj.label = {
normal: {
show: true,
position: 'center',
formatter: '合计：' + sum, //设置数据标签显示 合计：要显示的数值，需要修改这里
textStyle: {
fontSize: 12, //设置标签字体大小
color: '#FFF' //设置标签字体颜色
}
}
};
option.series.push(obj);
var pie = echarts.getChart();
pie.setOption(option);
var option2 = pie.getOption();
}
//获取合计值。需要修改这里。
function getSum(data) {
var sum = 0;
for (var i = 0; i < data.length; i++) {
sum += data[i].value;
}
return sum;
} |
报表资源：单指标圆环图_电网信息监控.xml（该资源基于内置的northwind数据库）