首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue顶点图在水平条形图中隐藏Y轴标签

Vue顶点图在水平条形图中隐藏Y轴标签
EN

Stack Overflow用户
提问于 2021-07-20 13:07:57
回答 1查看 308关注 0票数 1

我正在使用带有vue的apexcharts (vue-apexcharts 1.6.1),并制作用于超高清分辨率的水平条形图。apexcharts内部溢出了100%的图表宽度。

以下是模板代码:

代码语言:javascript
运行
复制
<template>
  <div>
    <apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
  </div>
</template>

下面是图表选项:

代码语言:javascript
运行
复制
options() {
  return {
    chart: {
      type: 'bar',
      width: "100%",
      height: 820,
      toolbar: {
        show: false
      }
    },
    legend: {
      show: false
    },
    xaxis: {
      categories: this.categoryData,
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      labels: {
        show: false
      }
    },
    yaxis: {
      opposite: true,
      labels: {
        style: {
          colors: ["#BEBFCB"],
          fontSize: "40px"
        }
      }
    },
    fill: {
      colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
      type: "gradient",
      gradient: {
        shade: "light",
        gradientToColors: [
          "#79f1a4",
          "#feb692",
          "#abdcff",
          "#ce9ffc",
          "#f6ceec"
        ],
        shadeIntensity: 1,
        type: "diagonal1",
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100]
      }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        distributed: true,
        borderRadius: 10,
        barHeight: "70%",
        colors: {
          ranges: [
            {
              from: 0,
              to: 0,
              color: "pink"
            }
          ],
          backgroundBarColors: "#272A52",
          backgroundBarRadius: 10
        }
      }
    },
    dataLabels: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    responsive: [
      {
        breakpoint: 3199,
        options: {
          chart: {
            height: 300
          },
          yaxis: {
            opposite: true,
            labels: {
              style: {
                colors: ["#BEBFCB"],
                fontsize: "14px"
              }
            }
          },
          plotOptions: {
            bar: {
              borderRadius: 4,
              colors: {
                backgroundBarRadius: 4
              }
            }
          }
        }
      }
    ]
  };
}

下面是上面代码的输出:Output of above code Output of above code with dev tools

预期行为:Expected behavior design

如何调整图表以使我的网站与设计相匹配?现在标签的字体大小是40px的超高清分辨率。

谢谢

另外,我没有在任何祖先元素中使用flex。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-20 20:28:16

我通过将maxWidth赋予y-axis label并将我的x轴类别操作为multiline解决了这个问题。

After fix image

代码语言:javascript
运行
复制
yaxis: {
      opposite: true,
      labels: {
        maxWidth: "auto",
        style: {
          colors: ["#BEBFCB"],
          fontSize: "40px"
        }
      }
    }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68449811

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档