ECharts渲染连续图形
function setChart(cdata) {
var data = [];
var color = '#14B4C2'; //填充颜色
var emphasisColor = '#1AF4B8'; //鼠标滑入颜色
for (var i = 0; i < cdata.length; i++) {
data.push({
value: [
0,
cdata[i].startTime,
cdata[i].endTime,
cdata[i].endTime - cdata[i].startTime
],
itemStyle: {
normal: {
color: color
},
emphasis: {
color: emphasisColor
}
}
});
}
//params：包含了当前数据信息和坐标系的信息
//api：是一些开发者可调用的方法集合，api.value(...)：意思是取出 dataItem 中的数值，api.coord(...)：意思是进行坐标转换计算
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 = api.size([0, 1])[1] * 0.7;
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(),
styleEmphasis: api.styleEmphasis()
};
}
var option = {
grid: {
height: 30,
top: 15,
left: 35,
bottom: 0,
right: 35
},
tooltip: {
show: true,
formatter: function (value, index) {
return '起：' + getDate(value.value[1]) + '<br/>' + '止：' +getDate(value.value[2]);
// return '起：' + moment(value.value[1]).format('MM-DD HH:mm:ss') + '<br/>' + '止：' + moment(value.value[2]).format('MM-DD HH:mm:ss');
}
},
xAxis: {
type: 'time',
axisLabel: {
show: true,
textStyle: {color: '#396386'},
formatter: function (value, index) {
//return moment(value).format('HH:mm').split(' ')[0]}
var value = getDate(value);
return value.split(' ')[0].substr(5) + '\n' + value.split(' ')[1];
}
},
axisLine: {lineStyle: {color: '#265d7f'}}, //x轴的颜色
axisTick: {lineStyle: {color: '#265d7f'}, alignWithLabel: true},
splitNumber: 17,
splitLine: {show: false}
},
yAxis: {
data: 'd',
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {
show: true,
lineStyle: {color: '#265d7f'}
}
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: [1, 2],
y: 0
},
data: data
}]
};
myChart = echarts.init(document.getElementById('lastRect'));
myChart.setOption(option);
window.onresize=myChart.resize;
}
setChart([{startTime: 1543647087349, endTime: 1543648887000}]);//初始化时间条