echarts 横向堆叠柱状图，展示2种状态
例图:
数据部分
//自定义x轴刻度文字
xAxisJudge: [
{
val: 0, date: "2020/9/19" },
{
val: 24, date: "2020/9/20" },
{
val: 48, date: "2020/9/21" },
{
val: 72, date: "2020/9/22" },
{
val: 96, date: "2020/9/23" },
{
val: 120, date: "2020/9/24" },
{
val: 144, date: "2020/9/25" },
],
//y轴的数据名称
machineName: ["机床一", "机床二", "机床三", "机床四", "机床五"],
echartData: [
{
name: "running",//name用来分隔2种状态
data: [32, 30, 30, 33, 39],
},
{
name: "idle",//name用来分隔2种状态
data: [12, 13, 10, 14, 9],
},
{
name: "running",
data: [22, 18, 19, 23, 29],
},
{
name: "idle",
data: [15, 21, 20, 15, 19],
},
{
name: "running",
data: [28, 23, 22, 18, 32],
},
],
echarts代码部分:
let xJ = this.xAxisJudge;
let yName = this.machineName;
let seriesData = JSON.parse(JSON.stringify(this.echartData));
//数据处理
for (let j = 0; j < seriesData.length; j++) {
let c = seriesData[j].name == "running" ? "#32CD32" : "#FFFF00";//可根据name设置柱状图颜色
seriesData[j].type = "bar";//柱状图
seriesData[j].barWidth = 26;//柱状图粗细
seriesData[j].stack = "status";
seriesData[j].label = {
//柱状图上提示文字样式
show: true,
position: "insideRight",
color:'black' //文字颜色
};
seriesData[j].itemStyle = {
color: c, //柱状图颜色
};
}
//echarts的 option参数
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
//图例
data: ["running", "idle"],//两种数据的name
x: "right",//可设置图例位置
y: "top",
},
//可设置echart图表的缩放,避免字体越界被遮蔽
// grid: {
// left: "3%",
// right: "4%",
// bottom: "3%",
// containLabel: true,
// },
xAxis: {
type: "value",
interval:24,//设置x轴显示的刻度
axisLabel: {
formatter: function(value) {
//自定义刻度上的显示文字
let texts = [];
for (let i = 0; i < xJ.length; i++) {
if (value <= xJ[i].val) {
texts.push(xJ[i].date);
break;
}
}
if (texts.length == 0) {
texts = [" "];
}
return texts;
},
},
},
yAxis: {
type: "category",
data: yName,
},
series: seriesData
};
var myChart = this.$echarts.init(document.getElementById("status"));
myChart.setOption(option);
};