SunlightPolylineChart

折线图组件，支持多组数据的折线展示，适用于展示数据的趋势变化和对比分析。

基本用法

单系列折线图

单系列折线图

<template>
    <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div
          style="
            background-color: #ffffff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          "
        >
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px">单系列折线图</h4>
       <SunlightPolylineChart
      :data="singleLineData"
      :xAxisData="xAxisData"
      height="300px"
      :smooth="true"
      :symbol="'circle'"
      :symbolSize="6"
    />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightPolylineChart } from 'sunlight-ui';

const singleLineData = ref([120, 200, 150, 80, 70, 110, 130]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

多系列折线图

多系列折线图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div
          style="
            background-color: #ffffff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          "
        >
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px">多系列折线图</h4>
          <SunlightPolylineChart
            :data="multiLineData"
            :xAxisData="xAxisData"
            height="300px"
            :showLegend="true"
            :colors="['#409EFF', '#67C23A', '#E6A23C']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SunlightPolylineChart } from "sunlight-ui";

const multiLineData = ref([
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
  },
  {
    name: "成本",
    data: [100, 150, 120, 65, 60, 85, 95],
  },
]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

区域填充折线图

区域填充折线图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div
          style="
            background-color: #ffffff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          "
        >
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px">区域填充折线图</h4>
          <SunlightPolylineChart
            :data="areaLineData"
            :xAxisData="xAxisData"
            height="300px"
            :showLegend="true"
            :colors="['#409EFF', '#67C23A']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SunlightPolylineChart } from "sunlight-ui";

const areaLineData = ref([
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
    areaStyle: true,
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
    areaStyle: true,
  },
]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

带数据点的折线图

带数据点的折线图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">带数据点的折线图</h4>
          <SunlightPolylineChart
            :data="singleLineData"
            :x-axis-data="xAxisData"
            height="300px"
            symbol="circle"
            :symbol-size="8"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SunlightPolylineChart } from 'sunlight-ui';

const singleLineData = [120, 200, 150, 80, 70, 110, 130];

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>

隐藏源代码

带图例的折线图

带图例的折线图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">带图例的折线图</h4>
          <SunlightPolylineChart
            :data="multiLineData"
            :x-axis-data="xAxisData"
            height="300px"
            :show-legend="true"
            legend-position="top"
            :colors="['#409EFF', '#67C23A', '#E6A23C']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SunlightPolylineChart } from 'sunlight-ui';

const multiLineData = [
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35]
  },
  {
    name: "成本",
    data: [100, 150, 120, 65, 60, 85, 95]
  }
];

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>

隐藏源代码

带标题的折线图

带标题的折线图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">带标题的折线图</h4>
          <SunlightPolylineChart
            :data="multiLineData"
            :x-axis-data="xAxisData"
            height="300px"
            :show-title="true"
            title="销售趋势分析"
            title-position="center"
            :show-legend="true"
            :colors="['#409EFF', '#67C23A']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SunlightPolylineChart } from 'sunlight-ui';

const multiLineData = [
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35]
  }
];

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>

隐藏源代码

自定义标题样式折线图

居中标题

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
          <h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">居中标题</h4>
          <SunlightPolylineChart
            :data="multiLineData"
            :x-axis-data="xAxisData"
            height="300px"
            :show-title="true"
            title="销售趋势分析"
            title-position="center"
            :title-style="{
              fontSize: 18,
              fontWeight: 'bold',
              color: '#333'
            }"
            :show-legend="true"
            :colors="['#409EFF', '#67C23A']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SunlightPolylineChart } from 'sunlight-ui';

const multiLineData = [
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35]
  }
];

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>

隐藏源代码

组件属性

属性名	类型	默认值	说明
data	SingleLineData | LineDataItem[]	必填	支持单系列和多系列数据
xAxisData	string[]	必填	X轴数据数组
height	string	'350px'	图表高度
colors	string[]	[]	颜色配置数组
lineWidth	number	2.5	线宽
showAreaColor	boolean	false	是否显示区域填充
smooth	boolean	true	是否平滑
symbol	string	'none'	数据点类型
symbolSize	number	6	数据点大小
showLegend	boolean	false	是否显示图例
legendPosition	'bottom' | 'top' | 'left' | 'right'	'bottom'	图例位置
showTooltip	boolean	true	是否显示提示框
loading	boolean	false	是否加载中
showAxisLine	boolean	true	是否显示轴线
showAxisLabel	boolean	true	是否显示轴标签
showSplitLine	boolean	true	是否显示分割线
isEmpty	boolean	false	是否为空数据
title	string	''	图表标题
showTitle	boolean	false	是否显示标题
titlePosition	'left' | 'center' | 'right'	'center'	标题位置
titleStyle	object	{}	标题样式

数据结构

单系列数据

const singleLineData = [120, 200, 150, 80, 70, 110, 130];

多系列数据

const multiLineData = [
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
    color: "#409EFF",
    lineWidth: 3,
    smooth: true,
    symbol: "circle",
    symbolSize: 6,
    areaStyle: true
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
    color: "#67C23A",
    lineWidth: 3,
    smooth: true,
    symbol: "circle",
    symbolSize: 6,
    areaStyle: true
  }
];

组件说明

SunlightPolylineChart 是一个折线图组件，支持多组数据的折线展示，适用于展示数据的趋势变化和对比分析。

特点

• 支持单系列和多系列数据
• 支持区域填充效果
• 支持自定义颜色、线宽、数据点等样式
• 支持平滑曲线和直线切换
• 支持图例显示和位置调整
• 支持提示框、坐标轴、分割线等配置
• 响应式设计，适配不同屏幕尺寸

适用场景

• 数据趋势分析
• 业务指标监控
• 销售数据展示
• 业绩对比分析
• 时间序列数据展示