[Feature] fontFamily

[amiralim1377]

What problem does this feature solve?

Next.js with next/font/local to load my font.

I want to know the best practice to make ECharts render text (titles, legend, labels, tooltips) using my custom font So far I have tried:

import { myFont } from "@/app/fonts/fonts";

const option = {
  title: {
    text: "Chart Title",
    textStyle: {
      fontFamily: `var(${myFont.variable})`,
    },
  },
  tooltip: {
    textStyle: { fontFamily: `var(${myFont.variable})` },
  },
  legend: {
    textStyle: { fontFamily: `var(${myFont.variable})` },
  },
  series: [
    {
      type: "pie",
      label: { fontFamily: `var(${myFont.variable})` },
      emphasis: { label: { fontFamily: `var(${myFont.variable})` } },
      data: [...],
    },
  ],
};

What does the proposed API look like?

// 1. Import your custom font (e.g., Persian Vazirmatn)
import { vazirmatn } from "@/app/fonts/fonts";
import ReactECharts from "echarts-for-react";

// 2. Provide the font to chart options
const chartOptions = {
  title: {
    text: "License Distribution",
    textStyle: {
      fontFamily: `var(${vazirmatn.variable})`, // Use custom font
      fontSize: 16,
      fontWeight: "bold",
    },
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      fontFamily: `var(${vazirmatn.variable})`, // Tooltip text in custom font
    },
  },
  legend: {
    textStyle: {
      fontFamily: `var(${vazirmatn.variable})`, // Legend in custom font
    },
  },
  series: [
    {
      type: "pie",
      label: {
        show: true,
        fontFamily: `var(${vazirmatn.variable})`, // Labels in custom font
      },
      emphasis: {
        label: {
          fontFamily: `var(${vazirmatn.variable})`, // Hover labels in custom font
        },
      },
      data: [
        { value: 3500000, name: "Industrial" },
        { value: 2800000, name: "Home" },
        { value: 1900000, name: "Device" },
      ],
    },
  ],
};

// 3. Use the chart in React
export default function DoughnutChart() {
  return (
    <div className={vazirmatn.className}>
      <ReactECharts option={chartOptions} style={{ width: "100%", height: 350 }} />
    </div>
  );
}

[helgasoft]

see examples in #14272 and #18991