echart画图是,x轴数据太多,会造成数据展示不全。
echarts图表中有个axisLabel配置项,是坐标轴刻度标签的相关设置。interval属性是坐标轴刻度标签的显示间隔,默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。还有一个属性:rotate: number 度角是倾斜的控制所在,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
// 大柱状图
drawLineBig() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#4dc6a8"],
title: { text: "" },
tooltip: {},
grid: {
x: 50,
y: 20,
x2: 20,
// left: '10%',
// bottom: '35%'
// y2: 50 //距离下边的距离
},
legend: {
data: ['销量']
},
xAxis: {
// show: false,
data: this.orderList_X,
splitLine: {
// show: false
},
axisLabel: {
showMaxLabel: true,
interval: 0,
rotate: 40,
},
},
yAxis: {
// show: false
max: function (value) {
return value.max * 1.5
}
},
series: [
{
name: "",
type: "bar",
// barWidth: 12,
barMaxWidth: 20,
data: this.orderList_Y
}
]
});
},
效果