@mt-kit/vue-echarts

Vue 3 中 ECharts 的封装，提供响应式的图表配置和便捷的使用方式。

相关资源：

• ECharts 官方文档
• makeapie - ECharts 社区
• ISQQW - ECharts 示例
• PPchart - ECharts 图表库

安装

npm i echarts @mt-kit/vue-echarts

API

useECharts

ECharts 图表 Hook，提供响应式的图表配置和更新方法。

参数：

参数名	说明	类型	是否必传
chartRef	图表容器的 ref	Ref<HTMLDivElement>	是

返回值：

属性名	说明	类型
setOptions	设置图表配置	(options: EChartsOption) => void

使用示例：

<script lang="ts" setup>
import type { Ref, ComputedRef } from "vue";
import { computed, ref } from "vue";
import { EChartsOption, useECharts } from "@mt-kit/vue-echarts";

const chartRef = ref<HTMLDivElement | null>(null);

const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

// 推荐使用 computed 创建响应式配置
// 注意：tooltip、grid、xAxis、yAxis 等配置应该根据项目提取为公共配置
const options: ComputedRef<EChartsOption> = computed(() => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        width: 1,
        color: "#019680"
      }
    }
  },
  grid: {
    left: "1%",
    right: "1%",
    top: "2%",
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`)
  },
  yAxis: {
    type: "value",
    max: 8000,
    splitNumber: 4
  },
  series: [
    {
      data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200],
      type: "bar",
      barMaxWidth: 80
    }
  ]
}));

setOptions(options.value);
</script>

<template>
  <div ref="chartRef" style="height: 500px; width: 100%"></div>
</template>

更多示例： 查看完整示例