效果：
drawLine() {
let myChart = this.$echarts.init(document.getElementById("qyslChart"));
var MyCube = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 12, //柱宽
zWidth: 4, //阴影折角宽
zHeight: 2, //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x, shape.y];
const p1 = [shape.x - 6, shape.y];
const p4 = [shape.x + 6, shape.y];
const p6 = [shape.x + 6 + 4, shape.y - 4];
const p7 = [shape.x - 6 + 4, shape.y - 4];
const p2 = [xAxisPoint[0] - 6, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + 6, xAxisPoint[1]];
const p5 = [xAxisPoint[0] + 6 + 4, xAxisPoint[1] - 4];
ctx.moveTo(p0[0], p0[1]); //0
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p2[0], p2[1]); //2
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p4[0], p4[1]); //4
ctx.lineTo(p0[0], p0[1]); //0
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p5[0], p5[1]); //5
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p4[0], p4[1]); //4
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p7[0], p7[1]); //7
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p4[0], p4[1]); //4
ctx.closePath();; }});
this.$echarts.graphic.registerShape('myCubeShape', MyCube);
myChart.setOption({
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(255,255,255,0.2)", //设置背景图片 rgba格式
color: "#18BDFB",
borderWidth: "1", //边框宽度设置1
borderColor: "rgba(0,204,205,0.5)", //设置边框颜色
textStyle: {
color: "#18BDFB" //设置文字颜色
},
},
xAxis: [{
type: 'category',
data: this.comName,
axisLine: {
lineStyle: {
color: "rgba(24,189,251,0.4)",
}
},
axisTick: {
show: false
},
axisLabel: {
rotate: 45,
fontWeight: "200",
color: "rgba(24,189,251,1)",
},
}],
yAxis: [{
type: 'value',
name:'(个)',
nameTextStyle:{
color: "rgba(24,189,251,0)",
padding:[0,30,0,0]
},
// splitNumber: 4,
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(24,189,251,0.2)'
}
},
axisLine: {
lineStyle: {
color: "rgba(24,189,251,0.4)"
},
},
axisLabel: {
fontSize:12,
fontWeight: "200",
color: "rgba(24,189,251,1)",
},
axisTick: {
show: false
},
nameTextStyle: {
color: "rgba(24,189,251,1)"
},
splitArea: {
show: false
}
}],
series: [{
name: '',
symbol: 'none',
//type: 'bar',
data: this.comCount,
type: 'custom',
renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);
return {
type: 'myCubeShape',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: {
type: 'linear',
x: 1,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(1, 64, 198, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(24, 189, 251, 1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
};
},
}]
});
window.addEventListener("resize", function() {
myChart.resize();
});
},
参考网址：https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all
