代码如下
option: {backgroundColor: "transparent",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(126,199,255,0)", // 0% 处的颜色},{offset: 0.5,color: "rgba(126,199,255,1)", // 100% 处的颜色},{offset: 1,color: "rgba(126,199,255,0)", // 100% 处的颜色},],global: false, // 缺省为 false},},},extraCssText: "width:100px;",textStyle: {//---提示框内容样式// color:"green",fontSize: 24,},// formatter: '工单数量: {c0}',},legend: {itemHeight: 14,itemWidth: 14,icon: "rect",top: "0",right: "5%",type: "plain",textStyle: {color: "#7ec7ff",fontSize: 24,},// icon:'rect',itemGap: 25,itemWidth: 18,},grid: {top: "10%",left: "15%",right: "5%",bottom: "15%",},xAxis: {max: 50,axisLine: {lineStyle: {color: "#44A0B7",},},axisLabel: {textStyle: {color: "#fff",fontSize: 24,},},show: true,type: "value",axisTick: {show: false,},splitLine: {show: false,},},yAxis: {data: ["提示", "一般", "重要", "紧急"],// data: ["紧急", "重要", "一般", "提示"],axisLine: {show: true,lineStyle: {color: "#fff",},},axisLabel: {fontStyle: "oblique",margin: 30,textStyle: {color: function (value, index) {if (index == 3) {return "#e00000";}if (index == 2) {return "#ea6c00";}if (index == 1) {return "#e8bc01";}if (index == 0) {return "#2695f5";}},fontSize: 24,},},axisTick: {show: false,},splitLine: {show: false,},},series: [{name: "已完成",type: "custom",stack: "all",renderItem: (params, api) => {const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x;const y =bandWidth * (params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;return {type: "obliqueRectangle",shape: {x: x,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,},style: api.style(),};},barWidth: 26,data: [5, 3, 8, 9],// 设置柱状图渐变itemStyle: {color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: "rgba(25,252,157,1)",},{offset: 1,color: "rgba(25,252,157,0.5)",},]),// borderColor: "#000",// borderWidth: 2,},},{name: "处理中",type: "bar",type: "custom",stack: "all",renderItem: (params, api) => {const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x;const y =bandWidth * (params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;return {type: "obliqueRectangle",shape: {x: x + 200,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,},style: api.style(),};},barWidth: 26,data: [10, 4, 5, 20],itemStyle: {color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: "rgba(38, 149, 245, 1)",},{offset: 1,color: "rgba(38, 149, 245, 0.5)",},]),// borderColor: "#000",// borderWidth: 2,},},{name: "待处理",type: "custom",stack: "all",renderItem: (params, api) => {const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x;const y =bandWidth * (params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;return {type: "obliqueRectangle",shape: {x: x + 600,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,},style: api.style(),};},stack: "all",barWidth: 26,data: [1, 3, 2, 14],// data: [0,0,0,0],itemStyle: {color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: "rgba(204, 204, 204, 1)",},{offset: 1,color: "rgba(204, 204, 204, 0.5)",},]),// borderColor: "#000",// borderWidth: 2,},},],},
initChart() {this.$api.MMS.Overall.GetEventData().then((res) => {if (res.ok) {this.option.series[0].data = res.data.done.reverse(); //已完成this.option.series[1].data = res.data.processing.reverse(); //处理中this.option.series[2].data = res.data.pending.reverse(); //待处理// this.option.series[0].data = this.option.series[0].data.reverse(); //已完成// this.option.series[1].data = this.option.series[1].data.reverse(); //处理中// this.option.series[2].data = this.option.series[2].data.reverse(); //待处理if (document.getElementById("echarts2")) {let myChart = this.$echarts.init(document.getElementById("echarts2"));let max1 = Math.max(...this.option.series[0].data);let max2 = Math.max(...this.option.series[1].data);let max3 = Math.max(...this.option.series[2].data);let sum = max1 + max2 + max3;//取出所有的最大值this.option.xAxis.max = sum *1.5;//设置横向栏的上限，优化显示效果const list = [];//储存第一列数据的长度，第二列渲染要用const list2 = [];//储存第二列数据的长度，第三列渲染要用this.option.series[0].renderItem = (params, api) => {//渲染第一列list.push(api.size([api.value()])[0]);const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x;//这里是用来控制渲染的x轴起始点const y =//这里是用来控制渲染的y轴起始点bandWidth *(this.option.series.length - params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;return {type: "obliqueRectangle",shape: {x: x,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,//倾斜度},style: api.style(),};};this.option.series[1].renderItem = (params, api) => {const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x + list[params.dataIndex] + 11;这里+11是为了实现和前一列数据有间隔const y =bandWidth *(this.option.series.length - params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;list2.push(list[params.dataIndex] + api.size([api.value()])[0] + 11);//储存第二列长度return {type: "obliqueRectangle",shape: {x: x,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,},style: api.style(),};};this.option.series[2].renderItem = (params, api) => {const barLayout = api.barLayout({count: 1,barWidth: 18,});const { bandWidth, offsetCenter, width } = barLayout[0];const x = params.coordSys.x + list2[params.dataIndex] + 11;//这里可以不加了，因为是最后一列了，如果还有的话类推即可const y =bandWidth *(this.option.series.length - params.dataIndex + 1 / 2) +offsetCenter +params.coordSys.y -width / 2;return {type: "obliqueRectangle",shape: {x: x,y: y + 2,width: api.size([api.value()])[0],height: width,offset: width * 0.5,},style: api.style(),};};myChart.clear();myChart.setOption(this.option);window.onresize = function () {myChart.resize();};}}});},
