今天遇到一个需求，需要做一个柱状图的排行榜，横过来的，然后需要一个刻度那显示两个柱子，第一个柱子显示百分比，第二个显示数量。然后我就写了两个柱子，发现百分比最大100.但是数量可能有几万几十万的。那这就有个问题，我的百分比数字太小，被挤得根本看不到了。
网上看了半天没有找到我要的解决办法，后来无意间想到了多轴的功能。试了一下发现果然可以。
效果图
代码
重点解决办法：我写了两个X轴，只不过我给隐藏了。然后我在series配置项内给其中一个柱子设置
xAxisIndex: 1,
这个 xAxisIndex: 1,意思就是让这根柱子对标第一个X轴，那另外的柱子就自动是对标生下的轴了。那就可以实现不管数值大小都不会互相比较影响刻度长度显示，因为我们根本不在同一个坐标上。各玩各的
barGraph(val) {
console.log(val, "--");
//初始化图标
var myCharts = this.$echarts.init(this.$refs["echart-right"]);
//Y轴的数据，和数据值位置一一对应
var cate = val.gtcodeArray;
//数据值，顺序和Y轴的名字一一对应totalCount
var option = {
title: {
text: this.rightname + "合格率排行榜top10",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
// trigger: "item",
// formatter: function (params) {
// return `百分比:${params.data.value}<br/>数量:${params.data.totalCount}`;
// },
},
//图表位置
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
//X轴
xAxis: [
{
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//不显示X轴刻度线和数字
splitLine: {
show: false },
axisLabel: {
show: false },
boundaryGap: [0, 0.001],
},
{
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//不显示X轴刻度线和数字
splitLine: {
show: false },
axisLabel: {
show: false },
boundaryGap: [0, 0.001],
},
],
yAxis: {
type: "category",
data: cate,
//升序
inverse: true,
splitLine: {
show: false },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//key和图间距
offset: 10,
//动画部分
animationDuration: 300,
animationDurationUpdate: 300,
//key文字大小
nameTextStyle: {
fontSize: 5,
},
},
series: [
{
//柱状图自动排序，排序自动让Y轴名字跟着数据动
realtimeSort: true,
xAxisIndex: 1,
name: "百分比",
type: "bar",
data: val.percentageArray,
barWidth: 12,
smooth: true,
valueAnimation: true,
//Y轴数字显示部分
label: {
normal: {
show: true,
position: "right",
valueAnimation: true,
offset: [5, -2],
textStyle: {
color: "#333",
fontSize: 13,
},
},
},
itemStyle: {
emphasis: {
barBorderRadius: 7,
},
//颜色样式部分
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0, color: "#3977E6" },
{
offset: 1, color: "#37BBF8" },
]),
},
},
},
{
//柱状图自动排序，排序自动让Y轴名字跟着数据动
name: "数量",
type: "bar",
data: val.totalCountArray,
barWidth: 12,
smooth: true,
valueAnimation: true,
//Y轴数字显示部分
label: {
normal: {
show: true,
position: "right",
valueAnimation: true,
offset: [5, -2],
textStyle: {
color: "#333",
fontSize: 13,
},
},
},
itemStyle: {
emphasis: {
barBorderRadius: 7,
},
//颜色样式部分
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0, color: "#8BC6EC" },
{
offset: 1, color: "#9599E2" },
]),
},
},
},
],
//动画部分
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
myCharts.setOption(option, true);
//图表大小变动从新渲染，动态自适应
window.addEventListener("resize", function () {
myCharts.resize();
});
},