我在nuxt项目使用echarts, 我先尝试了vue-echarts, 但有一些问题. 我没有使用nuxt-echarts, 最后我直接使用echarts. 下面是用法, vue项目也可以参考. 仅针对vue3.

按需引入, 用法简单

创建一个单独的文件, 我创建的是nuxt里的composables/echarts.js, 内容如下:

import * as echarts from "echarts/core";

// 引入echarts必要组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // DatasetComponent,
  // TransformComponent,
  LegendComponent
} from "echarts/components";

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
export { echarts }; // 导出 echarts

export function useEcharts(elementRef, options) {
  const chart = ref(null);
  // 调整大小
  const resizeChart = () => {
    chart.value?.resize();
  };
  // 清理资源
  const dispose = () => {
    window.removeEventListener("resize", resizeChart);
    if (chart.value) {
      chart.value.dispose();
      chart.value = null;
    }
  };
  watch(elementRef, () => {
    if (elementRef.value) {
      chart.value = echarts.init(elementRef.value);
    }
  });
  watch(() => [chart.value, options.value], () => {
    if (!chart.value || !options.value) return;
    chart.value.setOption(options.value);
  })
  onMounted(() => {
    window.addEventListener("resize", resizeChart);
  });
  onUnmounted(dispose);
  return {
    chart,
  };
}

使用示例

<ClientOnly>
  <div ref="chartEl" style="height: 400px"></div>
</ClientOnly>

import { use } from 'echarts/core'
import { LineChart } from "echarts/charts"
use([LineChart])

const chartEl = ref()
const chartOptions = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }
})
useEcharts(chartEl, chartOptions)
  • 一旦图表HTML元素准备好和chartOptions发生变化, 图表就会更新.
  • 窗口大小变化时, 图表会自动调整大小.
  • chartEl, 图表HTML元素, 需要有高度, 可以是固定高度, 也可以父级通过css flex实现的动态高度. 否则高度为0你看不见图表.
  • ClientOnly, 这是nuxt内置的组件, vue项目忽略即可. 在nuxt里推荐这样使用, 参考: Vue3 中使用 Echarts 遇到的问题.
  • 因为是按需引入, 所以只引入了图表的一些基础. 你还需要按你的需要引入图表, 比如这里使用折线图, 需要引入LineChart, 并使用use([LineChart])注册.
  • chartOptions可以是computed或ref的结果, 不能是reactive的结果, 或原生js对象.