1、beforeRenderer:图形渲染之前执行,主要用于修改图形样式(options),只能使用图形控件开放的options配置,宏代码执行完成后才刷新图形。 |
beforeRenderer示例代码:以官网示例demo“图形主题”页面中动态散点图为例,说明如何修改图形options。
function main(chartView) { // 1、获取smartbi中原始图形的options信息,是个json对象 // json对象的内容对应Echarts配置项手册的内容,可参考 http://echarts.baidu.com/option.html#title // options信息可以通过鼠标中键(滚轮)点击图形获取,是json字符串,可以直接贴到Echarts的官网看效果 var chart = chartView.getChartObject(); var option = chart.getOptions(); // 2、获取option信息后,根据自己的业务需要重新组装options,options的帮助可参考 http://echarts.baidu.com/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