...
beforeRenderer示例代码:以官网示例demo“图形主题”页面中动态散点图为例,说明如何修改图形options。demo效果
代码块 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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); } |
详细代码示例: demo演示详细代码示例,仅供参考:
代码块 | ||||||
---|---|---|---|---|---|---|
| ||||||
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);
} |