Echarts 图表字体换行和动态数据展示

X轴字体换行

如图，当 x 轴标签内容过长时，Echarts 会默认进行省略显示，而我们可以通过对标签内容进行格式化处理，实现在适当位置进行换行的效果，从而让标签内容得以完整显示，代码如下：

axisLabel: {
  fontSize: 12,
  formatter(val) {
    if (val.length > 2) {
      const array = val.split('');
      array.splice(2, 0, '\n');
      return array.join('');
    } else {
      return val;
    }
  }
}

设置默认的 Echarts 图表配置

我们可以通过下面的方式将默认的 Echarts 图表配置中将坐标轴标签的字体大小设置为 12。

import { baseEchartOptions } from "./base-echart-options"
import { px } from "./px";

export const createEchartsOptions = (options) => {
  const result = {
    ...baseEchartOptions,
    ...options,
  };
  if (!(options?.xAxis?.axisLabel?.fontSize)) {
    result.xAxis = result.xAxis || {};
    result.xAxis.axisLabel = result.xAxis.axisLabel || {};
    result.xAxis.axisLabel.fontSize = px(12);
  }
  if (!(options?.yAxis?.axisLabel?.fontSize)) {
    result.yAxis = result.yAxis || {};
    result.yAxis.axisLabel = result.yAxis.axisLabel || {};
    result.yAxis.axisLabel.fontSize = px(12);
  }
  return result;
}

使用方法：在调用 setOption 方法时，将 createEchartsOptions 函数作为参数传入，并传入一个空的配置对象，即可生成默认的 Echarts 图表配置。如：myChart.setOption(createEchartsOptions({}))。

动态数据展示

思路：

1. 定义一个 data 数组，用于存储图表的初始数据。
2. 使用 useRef() 钩子函数创建一个 myChart 变量，用于存储 ECharts 实例对象。
3. 创建一个 x 函数，将传入的数据转换为 ECharts 图表的配置项对象。
4. 在 useEffect() 回调函数中使用 echarts.init() 方法创建一个 ECharts 实例对象，将其挂载到组件的 DOM 元素上。使用 x() 函数和初始数据填充图表，以确保图表在组件挂载后立即展示。
5. 创建一个定时器，在定时器的回调函数中调用 x() 函数生成新的随机数据。

// 1.  定义一个 `data` 数组，用于存储图表的初始数据。
const data = [
    { name: 'xxx', value: 10 },
    { name: 'xxx', value: 15 },
    { name: 'xxx', value: 20 },
    { name: 'xxx', value: 25 },
    { name: 'xxx', value: 30 },
    { name: 'xxx', value: 35 },
    { name: 'xxx', value: 40 },
    { name: 'xxx', value: 45 },
    { name: 'xxx', value: 50 },
];
// 2.  使用 useRef() 钩子函数创建一个 myChart 变量，用于存储 ECharts 实例对象。
const myChart = useRef(null);
// 3. 创建一个 `x` 函数，将传入的数据转换为 ECharts 图表的配置项对象。3. 
const x = (data) => {
myChart.current.setOption(createEchartsOptions({
  grid: {
    x: px(50),
    y: px(30),
    x2: px(40),
    y2: px(50),
  },
  xAxis: {
    type: 'category',
    data: data.map(i => i.name),
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: { color: '#083b71' }
    },
    axisLabel: {
      fontSize: px(12),
      formatter(val) {
        if (val.length > 2) {
          const array = val.split('');
          array.splice(2, 0, '\n');
          return array.join('');
        } else {
          return val;
        }
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: { show: false },
    axisLine: {
      show: true,
      lineStyle: { color: '#083b71' }
    }
  },
  series: [
    {
      data: data.map(i => i.value),
      type: 'bar',
    }
  ],
}));
}

// 4. 在 `useEffect()` 回调函数中使用 `echarts.init()` 方法创建一个 ECharts 实例对象，将其挂载到组件的 DOM 元素上。使用 `x()` 函数和初始数据填充图表，以确保图表在组件挂载后立即展示。
useEffect(() => {
    myChart.current = echarts.init(divRef.current);
    x(data);
}, [])
// 5. 创建一个定时器，在定时器的回调函数中调用 `x()` 函数生成新的随机数据。
useEffect(() => {
    setInterval(() => {
      const newData = [
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
        { name: 'xxx', value: Math.floor(Math.random() * 50) + 1 },
      ];
      x(newData);
    }, 1500);
}, [])