echarts多y轴样式重叠问题

原创

已于 2024-02-22 11:49:31 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2024-02-22 11:40:27 首次发布

1、主要属性设置

yAxis: [
  {//y轴1
    nameTextStyle: {
      align: "right",
      padding: 0
    }
  },
  {//y轴2
    nameTextStyle: {
      align: "left",
      padding: 0
    }
  },
  {//y轴3
    axisLabel: {
      margin: 50
    },
    nameTextStyle: {
      align: "left",
      padding: [0, 0, 0, 50]
    },
    axisPointer: {
      label: {
        margin: 50,
      }
    }
  }
],

2、页面效果

3、完整代码

vue3 + element plus例子

<template>
  <div ref="chartPage" class="container">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://echarts.apache.org/zh/index.html" target="_blank">echarts官方文档</a>
      </el-col>
    </el-row>

    <el-divider content-p