LineChart 折线图

LineChart 折线图 的基础用法、公开 API 与示例。

基础示例

展示连续指标的趋势变化。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { LineChart } from "@/components/chart/line-chart";

const demoProps = { height: "260px", xAxisData: ["一月", "二月", "三月"], data: [10, 18, 22], showAreaColor: true };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <LineChart v-bind="demoProps"></LineChart>
    </div>
  </ClientOnly>
</template>

隐藏源代码

面积趋势

开启面积填充、图例和数据标签，用于突出累计趋势。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { LineChart } from "@/components/chart/line-chart";

const demoProps: InstanceType<typeof LineChart>["$props"] = {
  height: "280px",
  xAxisData: ["周一", "周二", "周三", "周四", "周五"],
  data: [
    { name: "计划", data: [18, 24, 28, 32, 36], showAreaColor: true },
    { name: "实际", data: [16, 22, 30, 29, 38], showAreaColor: true },
  ],
  showLegend: true,
  legendPosition: "bottom",
  symbol: "circle",
  symbolSize: 8,
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <LineChart v-bind="demoProps" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { LineChart } from "@/components/chart/line-chart";

Props

参数	说明	类型	默认值	必填
value	数值	number	-	是
label	标签	string	-	是
percentage	百分比	number	-	是
date	日期	string	-	否
height	高度	string | number	DEFAULT_CHART_HEIGHT	否
color	颜色	string	-	否
showAreaColor	是否显示区域颜色	boolean	false	否
chartData	图表数据	number[]	-	否
isMiniChart	是否为迷你图表	boolean	-	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
LineChart	导出 LineChart 供业务侧复用。	useInstall(index)

Types

LineChartProps

折线图卡片属性。

字段	说明	类型	默认值	必填
value	数值	number	-	是
label	标签	string	-	是
percentage	百分比	number	-	是
date	日期	string	-	否
height	高度	string | number	-	否
color	颜色	string	-	否
showAreaColor	是否显示区域颜色	boolean	-	否
chartData	图表数据	number[]	-	否
isMiniChart	是否为迷你图表	boolean	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。