echarts 自定义区间状态图表
效果如下
html
<div class="tableHeight">
<div class="eqBox">
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</div>methods
// 画图
mainChats () {
//
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('main'));
// 各状态的颜色
var colors = ['#2d8cf0', '#FFCC00', '#F56580'];
// 四种状态
var state = ['正常', '离线', '异常'];
var data = [
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [0, 0, 5]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [0, 5, 7]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [0, 7, 9]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [0, 9, 24]
},
// 2
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [1, 0, 5]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [1, 5, 7]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [1, 7, 9]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [1, 9, 24]
},
// 3
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [2, 0, 3]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [2, 3, 8]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [2, 8, 10]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [2, 10, 24]
},
// 4
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [3, 0, 3]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [3, 3, 8]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [3, 8, 10]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [3, 10, 24]
},
// 5
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [4, 0, 3]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [4, 3, 8]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [4, 8, 10]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [4, 10, 24]
},
// 6
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [5, 0, 3]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '离线',
value: [5, 3, 8]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '异常',
value: [5, 8, 10]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [5, 10, 24]
}
]
myChart.setOption({
color: colors,
tooltip: {
formatter: function (params) {
return params.name + ':' + params.value[1] + '~' + params.value[2];
}
},
legend: {
data: state,
top: '5%',
selectedMode: false, // 图例设为不可点击
textStyle: {
color: '#000'
}
},
grid: {
height: 'auto',
// left: '0%',
// right: '0%',
// top: '0%',
// bottom: '0%',
containLabel: true
},
xAxis: {
// min: 0 // x轴零刻度对应的实际值
data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
yAxis: {
minInterval: 10,
data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
axisTick:{ //y轴刻度线
show:false
},
axisLine:{ //y轴
show:false
},
},
series: [
// 用空bar来显示四个图例
{name: state[0], type: 'bar', data: []},
{name: state[1], type: 'bar', data: []},
{name: state[2], type: 'bar', data: []},
{name: state[3], type: 'bar', data: []},
{
type: 'custom',
renderItem: function (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 = 24;
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()
};
},
encode: {
x: [1, 2],
y: 0
},
data: data
}
]
});
}结束