renderItem不对所有数据起作用,例如data的长度为20,可是只对其中10个进行renderItem函数
配置项如下
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = [];
var startTime = 0;
var categories = [];
var types = [{
color: '#7b9ce1'
}, {
color: '#bd6d6c'
}, {
color: '#75d874'
}, {
color: '#e0bc78'
}, {
color: '#dc77dc'
}, {
color: '#72b362'
}, {
color: '#FFD700'
}, {
color: '#FF3E96'
}, {
color: '#BF3EFF'
}, {
color: '#836FFF'
}];
var index = 0;
var maxNum = "${signalPage.intMaxNum}";
if (maxNum == 1)
maxNum = 2;
for (var i = 0; i < maxNum; i++)
categories.push(''); <
c: forEach items = "${signalPage.signalDynamicVOList}"
var = "signalDynamicVO" >
data.push({
name: "${signalDynamicVO.intId}",
value: [index, "${signalDynamicVO.floatLowFrequency}",
"${signalDynamicVO.floatHighFrequency}",
"${signalDynamicVO.strUpDown}",
"${signalDynamicVO.strProtocol}",
"${signalDynamicVO.strModulation}",
"${signalDynamicVO.strBandwidth}",
"${signalDynamicVO.strSymbolRate}",
"${signalDynamicVO.floatFrequencyOffset}",
"${signalDynamicVO.strChannelCoding}",
"${signalDynamicVO.strUnit}",
"${signalDynamicVO.strRemark}",
"${signalDynamicVO.strName}"
],
itemStyle: {
normal: {
color: types[Math
.round(Math.random() * (types.length - 1))].color
}
}
});
if (index == (maxNum - 1)) {
index = 0;
} else {
index = index + 1;
} <
/c:forEach>
//var count = 0;
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = 10;
return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
}
option = {
tooltip: {
formatter: function(params) {
var str = "<ul style='margin: 0;padding:0 10px 0 10px'><li><span style='font-size:1.1em'>名称</span>:" +
params.value[12] +
"</li><li><span style='font-size:1.1em'>起始频率</span>:" +
params.value[1] +
"MHz</li><li><span style='font-size:1.1em'>截止频率</span>:" +
params.value[2] + "MHz</li>";
if (params.value[3] != null && params.value[3] != "") {
str = str +
"<li><span style='font-size:1.1em'>上下行</span>:" +
params.value[3] + "</li>";
}
if (params.value[4] != null && params.value[4] != "") {
str = str +
"<li><span style='font-size:1.1em'>参考技术体制</span>:" +
params.value[4] + "</li>";
}
if (params.value[5] != null && params.value[5] != "") {
str = str +
"<li><span style='font-size:1.1em'>调制方式</span>:" +
params.value[5] + "</li>";
}
if (params.value[6] != null && params.value[6] != "") {
str = str +
"<li><span style='font-size:1.1em'>信道带宽</span>:" +
params.value[6] + "</li>";
}
if (params.value[7] != null && params.value[7] != "") {
str = str +
"<li><span style='font-size:1.1em'>符号速率</span>:" +
params.value[7] + "</li>";
}
if (params.value[8] != null && params.value[8] != "") {
str = str +
"<li><span style='font-size:1.1em'>频偏</span>:" +
params.value[8] + "Hz</li>";
}
if (params.value[9] != null && params.value[9] != "") {
str = str +
"<li><span style='font-size:1.1em'>信道编码</span>:" +
params.value[9] + "</li>";
}
if (params.value[10] != null && params.value[10] != "") {
if (params.value[10].length > 35) {
str = str +
"<li><span style='font-size:1.1em'>用频单位/应用</span>:" +
params.value[10].substring(0, 35) +
"</li>";
str = str +
"<li>" +
params.value[10].substring(35,
params.value[10].length) + "</li>";
} else {
str = str +
"<li><span style='font-size:1.1em'>用频单位/应用</span>:" +
params.value[10] + "</li>";
}
}
if (params.value[11] != null && params.value[11] != "") {
str = str +
"<li><span style='font-size:1.1em'>其他信息</span>:" +
params.value[11] + "</li>";
}
return str;
}
},
title: {
text: '北京地区无线电频率使用标示图',
left: 'center'
},
legend: {
data: ['bar', 'error']
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 420,
height: 10,
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
}],
grid: {
height: 300,
x: 30
},
xAxis: {
scale: true,
axisLabel: {
formatter: function(val) {
return Math.max(0, val - startTime) + ' MHz';
}
}
},
yAxis: {
data: categories
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: [1, 2],
y: 0
},
data: data
}]
};
myChart.on('click', function(params) {
showDetail(params.name, params.value[12]);
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);