beforeRenderer示例说明

beforeRenderer

1、beforeRenderer：图形渲染之前执行，主要用于修改图形样式（options），只能使用图形控件开放的options配置，宏代码执行完成后才刷新图形。

beforeRenderer示例代码：以官网示例demo“图形主题”页面中动态散点图为例，说明如何修改图形options。

获取图形对象

function main(chartView) {
//	1、获取smartbi中原始图形的options信息,是个json对象
//	json对象的内容对应Echarts配置项手册的内容，可参考 https://echarts.apache.org/zh/option.html#title
//	options信息可以通过鼠标中键（滚轮）点击图形获取，是json字符串，可以直接贴到Echarts的官网看效果
 	var chart = chartView.getChartObject();
    var option = chart.getOptions();
    
//	2、获取option信息后，根据自己的业务需要重新组装options，options的帮助可参考 https://echarts.apache.org/zh/option.html#title
//  比如，获取数据对象并遍历
    var series = option.series;
    for (var i in series) {
        var seriesItem = series[i];
        data = seriesItem.data;
        delete seriesItem.data; //初始option中去掉data数据，拼在独立的options中。
    }
    var dataOptions = [];
//    ................... 其它业务逻辑
//  示例逻辑，设置表格对象的右边距
	option.grid = {
		right: '110' //空出位置显示timeline组件
	};
	
//	如果只是修改options，到这里就可以结束了。
	
//	如果像demo示例，需要把options整个对象的结果改变，则还要注意下面2点：
//  ................... 其它业务逻辑
//  示例逻辑，使用timeline组件的图形，需要重新组织options
    var newOptions = {
        baseOption: option,
        options: dataOptions
    };    
//	3、把新的options设置到图形对象中，
    chart.setOptions(newOptions);
}

详细代码示例，仅供参考：

function main(chartView) {
    var chart = chartView.getChartObject();
    var option = chart.getOptions();
    var data = [];
    var series = option.series;
    // 新版本去掉
     
    option.chartex = {
        timelineFieldIndex: 3
    };
    if (!option.chartex || !option.chartex.timelineFieldIndex) {
        return;
    }
 
    for (var i in series) {
        var seriesItem = series[i];
        data = seriesItem.data;
        delete seriesItem.data; //初始option中去掉data数据，拼在独立的options中。
    }
 
    var timelineData = [],
        chartData = chartView.getGridData().data, //所有表格数据
        oldValue = "",
        dataSlice = []; //拆分数据的位置
    for (var i = 0; i < chartData.length; i++) {
        var row = chartData[i];
        // 获取时间轴的数据
        var cellValue = row[option.chartex.timelineFieldIndex].value;
        if (oldValue != cellValue) {
            timelineData.push(cellValue);
            dataSlice.push(i);
            oldValue = cellValue;
        }
    }
     
    // timeline组件配置,参考文档
    option.timeline = {
        data: timelineData, ////timeline 组件数据，动态数据的时间显示
        axisType: 'category',
        orient: 'vertical',
        autoPlay: true,
        inverse: true,
        playInterval: 100,
        left: null,
        right: 0,
        top: 20,
        bottom: 20,
        width: 55,
        height: null,
        symbol: 'none',
        controlStyle: {
            showNextBtn: false,
            showPrevBtn: false,
            normal: {
                color: '#666',
                borderColor: '#666'
            }
        }
    };
    option.grid = {
        right: '110' //空出位置显示timeline组件
    };
    //设置标题
    option.title = {
        text: timelineData[0] + '',
        textAlign: 'center',
        left: '63%',
        top: '55%',
        textStyle: {
            fontSize: 60
        }
    };
            // color: 'rgba(255, 255, 255, 0.7)'
     
    var itemStyle = {
        normal: {
            opacity: 0.8,
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(25, 0, 0, 0.5)'
        }
    };
    // 以下为重新拼timeline动态数据，每个时间对应数据为数组中的一个对象
    var newdata = data;
    var dataOptions = [];
    for (i = 1; i < dataSlice.length; i++) {
        var data1 = newdata.slice(dataSlice[i - 1], dataSlice[i]);
        dataOptions.push({
            series: {
                data: data1,
                itemStyle: itemStyle,
                symbolSize: function(val) {
                    var x = val[2];
                    var y = Math.sqrt(x / 5e8) + 0.1;
                    return y * 40;
                }
            },
            title: {
                show: true,
                text: timelineData[i - 1] + ''
            }
        });
        if (i == dataSlice.length - 1) {
            data1 = newdata.slice(dataSlice[i]);
            dataOptions.push({
                series: {
                    data: data1,
                    itemStyle: itemStyle,
                    symbolSize: function(val) {
                        var x = val[2];
                        var y = Math.sqrt(x / 5e8) + 0.1;
                        return y * 40;
                    }
                },
                title: {
                    show: true,
                    text: timelineData[i] + ''
                }
            });
        }
    }
    //重新设置属性
    var newOptions = {
        baseOption: option,
        options: dataOptions
    };
    //修改visualMap,控制指标颜色,根据显示名称染色
    var visualMapCategories = [];
    for (var i = 0; i < data1.length; i++) {
        var name = data1[i].value[3];
        visualMapCategories.push(name);
    }
    // visualMapCategories = ["China","United States","United Kingdom","Russia",
    // "India","France","Germany","Australia","Canada","Cuba","Finland","Iceland","Japan",
    // "North Korea","South Korea","New Zealand","Norway","Poland","Turkey"];
    var visualMap2 = {
        show: false,
        dimension: 3,
        categories: visualMapCategories,
        calculable: true,
        precision: 0.2,
        inRange: {
            color: [ '#dd4444', '#fec42c', '#80F1BE','#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487']
        }
    };
    option.visualMap = visualMap2;
    chart.setOptions(newOptions);
}

示例资源：示例资源.xml

关注我们

服务支持

页面树结构

beforeRenderer示例说明