我对Echart.js遇到一些问题。实际上，这不是一个大问题，我只想将数据添加到“ categoryB”和“ categoryC”中。但是我不知道该怎么办。我将向您提供此图表的图像，代码和Github。
此图表的github：https://github.com/suplex2825/chart-
代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="dist/echarts.min.js"></script>
<script type="text/javascript" src="dist2/echarts-gl.min.js"></script>
<script type="text/javascript" src="dist3/ecStat.min.js"></script>
<script type="text/javascript" src="dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="map/js/china.js"></script>
<script type="text/javascript" src="map/js/world.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>-->
<script type="text/javascript" src="dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="test/lib/simplex.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = [
{ name: 'e',
value: [
0,
'2016/12/18 00:00:00',
'2016/12/18 00:30:05',
5
],
itemStyle: {
normal: {
color: 'blue'
}
}}, { name: 'e',
value: [
0,
'2016/12/18 01:00:00',
'2016/12/18 01:30:05',
'123wewe'
],
itemStyle: {
normal: {
color: 'blue'
}
}}
];
var dataCount = 10;
var startTime = +new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
{name: 'JS Heap', color: '#7b9ce1'},
{name: 'Documents', color: '#bd6d6c'},
{name: 'Nodes', color: '#75d874'},
{name: 'Listeners', color: '#e0bc78'},
{name: 'GPU Memory', color: '#dc77dc'},
{name: 'GPU', color: '#72b362'}
];
var anchor = [
{name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]},
{name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]}
];
// Generate mock data
/*echarts.util.each(categories, function (category, index) {
var baseTime = startTime;
for (var i = 0; i < dataCount; i++) {
var typeItem = types[Math.round(Math.random() * (types.length - 1))];
var duration = Math.round(Math.random() * 10000);
data.push({
name: typeItem.name,
value: [
index,
baseTime,
baseTime += duration,
duration
],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
baseTime += Math.round(Math.random() * 2000);
}
});*/
console.log(data);
function renderItem(params, api) {
console.log(api);
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
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) {
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
title: {
text: 'Profile',
left: 'center'
},
legend: {
data: ['bar', 'error']
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 400,
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
},
xAxis: {
type:'time',
//min: startTime,
scale: true,
//axisLabel: {
// formatter: function (val) {
// return Math.max(0, val - startTime) + ' ms';
// }
// }
},
yAxis: {
data: categories
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: [1, 2],
y: 0
},
data: data
},{
name:'.anchor',
type:'line',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}}
}]
};
;
myChart.on('click',function(p){
console.log('click');
console.log(p)
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
您的renderItem方法需要返回多个子代。现在，您只是要回一个孩子。您实际上可以通过将其包括在返回中来选择要显示的孩子。
因此，总结起来，您需要执行以下操作：
return {
type: 'group',
children: [
{
type: 'rect',
ignore: api.value(0) !== 'Category B' && api.value(0) !== 'Category C',
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(),
},
{
type : 'rect',
ignore : api.value(0) !== 'Category A' && api.value(0) !== 'Category C',
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(),
}]
};
希望这会有所帮助！