Smartbi V7 帮助中心
页面树结构
转至元数据结尾
转至元数据起始

示例说明

在demo中的电网信息监控报表中，有如下的单指标柱图。

这种单指标柱图的特点是：有两个扇区，其中一个扇区的颜色偏暗；另一个扇区颜色偏亮，此扇区标志唯一的一个指标数据。并且圆环图中心显示数据值。

 

此文档提供如何实现此类单指标柱图。本文中示例如下：

 

 

实现步骤

注：此示例中涉及到宏代码，宏代码仅供参考。


1.创建数据集

创建数据集，查询出数据，比如此示例中的数据为0.53，另外，由于整个圆环是一个整体，有两个扇区，那么还需要构造一条数据：0.47，与指标数据0.53合起来为1。预览如下：

 

2.创建图形

基于上述步骤的数据集创建仪表分析或者电子表格，图形选择“标准环形图”

 

勾选X轴和Y轴

显示效果如下：

 

3.设置扇区颜色

打开图形设置界面，切换到“扩展属性”页签，输入如下扩展属性，设置两个扇区的颜色

{
"color": ["#C23531", "#F6DBDA"]
}

 

4.隐藏图例

打开图形设置界面，切换到“图例”页签下，选择“不显示图例”

如下：

 

5.通过宏代码设置中心位置显示数值

保存报表，并在报表上右键-》编辑宏，新建客户端模块。选择对象 Chart，选择事件beforeRender，并将以下示例代码拷贝到代码区。

 

  • 宏类型

  • 类型对象事件
    客户端模块ChartbeforeRender

 

  • 宏代码

  • 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 '';
                    }
                };
        }
    }
}

 

另外，也可以使用下面的宏代码实现。两种宏代码取其一即可，没有什么区别。

  • 宏类型

  • 类型对象事件
    客户端模块ChartafterRender

 

  • 宏代码

  • 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。并将下面的宏代码拷贝到宏代码区域

 

  • 宏类型

  • 类型对象事件
    客户端模块ChartafterRender

     

     

  • 宏代码

  • 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数据库）