甩掉图表文字省略的烦恼：Echarts坐标轴文字长度自动调整小技巧

2022-11-11 08:59:12

Echarts 坐标轴文字省略：告别杂乱，提升图表可读性

前言

在使用 Echarts 图表时，难免会遇到坐标轴文字过长，导致省略显示的困扰。这不仅影响了图表的美观性，也给数据分析和展示带来了不便。本文将深入探讨 Echarts 坐标轴文字省略的痛点，并提供基于 Vue 项目中 Echarts 组件的解决方案，助你轻松解决这一难题。

坐标轴文字省略的痛点

坐标轴文字省略带来的问题不容忽视：

影响美观性： 过长的坐标轴文字会破坏图表布局，显得杂乱无章。
** затрудняет анализ данных：** 省略的文字会隐藏重要信息， затрудняет анализ данных。
降低交互性： 鼠标悬停时无法查看完整文字，降低了图表交互的体验。

解决方案：Vue 项目中 Echarts 组件的 axisLabel 属性

为了解决坐标轴文字省略问题，我们可以利用 Vue 项目中的 Echarts 组件提供的 axisLabel 属性。通过设置该属性，可以实现坐标轴文字的自动调整。具体步骤如下：

axisLabel: {
  formatter: function (value) {
    // 如果文字长度超过 10 个字符，则省略显示，鼠标悬停时显示全部文字
    if (value.length > 10) {
      return value.substring(0, 10) + '...';
    } else {
      return value;
    }
  }
}

步骤指南：

安装 Vue 项目中的 Echarts 组件。
在 Vue 组件中引入 Echarts 组件。
在 Echarts 组件中设置 axisLabel 属性。
在 formatter 函数中，根据文字长度判断是否省略显示，并设置鼠标悬停时显示全部文字。

示例代码：

<template>
  <div id="chart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const chartDom = document.getElementById('chart')
    const myChart = echarts.init(chartDom)

    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
          formatter: function (value) {
            // 如果文字长度超过 10 个字符，则省略显示，鼠标悬停时显示全部文字
            if (value.length > 10) {
              return value.substring(0, 10) + '...';
            } else {
              return value;
            }
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}
</script>