图片说明,同一个页面两个图表 一个紧贴坐标轴,一个保留间隙如何实现
1.完成基本的echarts渲染之后,在相应的变量中传一个参数
// 第一个图表的变量 传入***boundaryGap为false***控制两端不留空格
customerNumLegend: Object.freeze([
{ key: "customerNum", name: "客户总数", type: "line", boundaryGap: false },
]),
// 第二个图表的变量 传入***boundaryGap为true***控制两端保留空格
topTenLegend: Object.freeze([
{ key: "customerNum", name: "客户总数", type: "bar" , boundaryGap: true },
]),
2.拿到传递的参数控制图表
// 基本代码结构 重点是xAxis中
drawEchart(echartsData, domId, legend, xAxisStr) {
let obj = document.getElementById(domId);
let charts = echarts.init(obj);
let timer = 0;
window.onresize = function () {
clearTimeout(timer);
timer = setTimeout(() => {
charts.resize();
}, 200);
};
const option = {
color: ["#088AEE", "#6BD4C3", "#FA7216", "#E74E59"],
tooltip: {
trigger: "axis",
},
legend: {
data: legend.map((i) => i.name),
padding: [0, 0, 0, 0],
margin: [40, 0, 20, 0],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: '5%',
containLabel: true,
},
xAxis: {
// 拿到传过来的值 打印legend是数组 可以看到相应的false 和true 以此控制图表两端间距
//再处理相应的数组 boundaryGap: legend[0].boundaryGap
*boundaryGap: legend[0].boundaryGap,*
type: "category",
left:30,
data: echartsData.map((i) => i[xAxisStr]),
axisLine: {
lineStyle: {
color: "#ccc",
},
},
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#ccc",
},
},
},
series: legend.map((i) => {
const item = {
barWidth: 30, //柱图宽度
name: i.name,
type: i.type,
smooth: true,
data: echartsData.map((v) => v[i.key]),
};
return item;
}),
};
charts.setOption(option);
},
3.简单的控制图表两端间距就可以啦!
😉哪里不对请多多指点