如图需要制作一个横向的柱状图,且起点不紧挨着零刻度线。
从元素中可以看到一个柱状图中是有两个canvas构成的,第一个canvas是横竖坐标,第二个canvas就是横向的柱状图。那么需要通过找到第二个canvas然后给它绑定样式属性。
虽然我们不知道这个元素的id,但我们知道这个元素一定是canvas标签。
所以我们可以通过document.getElementByTagName的方式去找到对应的canvas。
找到对应的canvas后就可以通过绑定,将样式重写到这个canvas里面了,在这里需要离开横轴坐标一点的话需要调整left的值。
let canvas = document.getElementsByTagName("canvas");
canvas[2].style="position:absolute;left:20px;"
注:
目前能达到效果。但这样调整以后,柱状图的数据和x轴坐标肯定不是正确对应了。或许可以通过别的调整来达到对应的关系,需要另外调整。
附上完整代码
<div class="charts2" id="charts2"></div>
charts2() {
let charts2 = this.$echarts.init(document.getElementById("charts2"));
var getName = [
"a",
"b",
"c",
"d",
"e",
"f"
];
var getValue = [128, 170, 118, 159, 128, 126];
let option = {
grid: {
left: "5%",
right: "10%",
bottom: "18%",
top: "2%",
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
},
formatter: function(params) {
return params[0].name + " : " + params[0].value;
}
},
xAxis: {
show: true,
type: "value",
name: "单位(分钟)",
nameTextStyle: {
color: "rgb(106,206,244)"
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(40, 81, 110, 1)",
width: 2
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: "rgb(106,206,244)"
}
},
splitNumber: 7
},
yAxis: [
{
type: "category",
inverse: true,
offset: 100,
axisLabel: {
show: true,
align: "left",
textStyle: {
color: "rgb(106,206,244)"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(40, 81, 110, 1)",
width: 5
}
},
data: getName
}
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
label: {
show: true,
position: "right",
color: "#fff",
fontSize: 14,
offset: [5, 0]
},
itemStyle: {
normal: {
barBorderRadius: 30,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(63,139,254,1)"
},
{
offset: 1,
color: "rgba(170,243,255,1)"
}
])
}
},
barWidth: 10,
data: getValue
}
]
};
let option2 = {
grid: {
left: "15%",
right: "10%",
bottom: "18%",
top: "2%",
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
},
formatter: function(params) {
return params[0].name + " : " + params[0].value;
}
},
xAxis: {
show: true,
type: "value",
name: "单位(分钟)",
nameTextStyle: {
color: "rgb(106,206,244)"
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(40, 81, 110, 1)",
width: 2
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: "rgb(106,206,244)"
}
},
splitNumber: 7
},
yAxis: [
{
type: "category",
inverse: true,
offset: 100,
axisLabel: {
show: true,
align: "left",
textStyle: {
color: "rgb(106,206,244)"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(40, 81, 110, 1)",
width: 5
}
},
data: getName
}
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
label: {
show: true,
position: "right",
color: "#fff",
fontSize: 14,
offset: [5, 0]
},
itemStyle: {
normal: {
barBorderRadius: 30,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(63,139,254,1)"
},
{
offset: 1,
color: "rgba(170,243,255,1)"
}
])
}
},
barWidth: 10,
data: getValue
}
]
};
charts2.setOption(option);
window.addEventListener("resize", function() {
charts2.resize();
});
let canvas = document.getElementsByTagName("canvas");
canvas[2].style="position:absolute;left:20px;"
}