echarts多y轴优化方案

最新推荐文章于 2024-06-06 17:56:34 发布

zhou13528482267

最新推荐文章于 2024-06-06 17:56:34 发布

阅读量249

点赞数

文章标签： echarts 前端多y轴显示

本文链接：https://blog.csdn.net/zhou13528482267/article/details/134058134

版权

该博客探讨了如何优化ECharts中多y轴的显示，主要方法是在点击图例时动态屏蔽y轴并自动计算最优位置。通过监听图例点击事件，实现了y轴显示与隐藏的平滑过渡。

摘要由CSDN通过智能技术生成

优化方向：点击图例，对y轴进行屏蔽，自动计算y轴位置

效果如下：

对应实现思路：通过监听图例点击事件，渲染y轴显示隐藏和y轴对应位置。

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
let myChart: any = null;

let colors = ref();
let option = ref();
colors.value = [
  "#5470C6",
  "#91CC75",
  "#EE6666",
  "#29b061",
  "#9D6630",
  "#FFC24C",
  "#2B71C3",
  "#9B2222",
];
option.value = {
  backgroundColor: "#ffffff",
  color: colors.value,
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  grid: {
    top: 50,
    bottom: 30,
    left: 60,
    containLabel: true,
  },
  legend: {