echarts按照时间显示柱状图_echarts 不连续的柱状图 在线时间分布离散图

刚开始看到ui的设计图时，我就一直在想怎么可以用柱状图堆叠的形式来呈现这种效果。直到我看到了这个官方实例自定义系列，跟我要实现的效果非常相似了。这是echarts的自定义系列图表，type: 'custom'。

所以我就直接把这个实例给改改，改成自己要实现的效果。

直接上代码吧。

1、写一个dom用来画echarts

2、基本的配置项

scatterChartOption:{

color:['#1ca3ff','rgba(0,0,0,0.3)'],

legend: {

top: 0,

right:0,

selectedMode:false,

data: ['在线','离线']

},

grid: {

left: '10px',

right: '10px',

bottom: '30px',

top:'40px',

containLabel: true

},

xAxis: {

type:'time',

splitNumber:13,

axisLabel: {

formatter: function (timestamp) { //秒级时间戳转换成YYYY-MM-DD hh:mm:ss并设置换行

timestamp = timestamp*1000

let date = new Date(timestamp);

let YY = date.getFullYear() + '-';

let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';

let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMi