代码如下
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();
};
}
}
});
},
