零云®lyCharts v26

Appearance

Line 线状图 ​

线状图是一种以线段连接各数据点的图表，用于展示数据随时间或其他连续变量的变化趋势。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基础折线图 ​

通过在 [series] 中添加一个对象，可以绘制一条折线。

vue
<ly-charts-line 
  ref="straightChart"
  :option="straightOption" 
  width="700rpx"
  height="260px"
  @click="onChartClick">
</ly-charts-line>

<script setup>
import { ref } from 'vue'

const straightOption = ref({
  title: {
    text: '直线折线图',
    textStyle: {
      fontSize: 16,
      color: '#333'
    }
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230],
      smooth: false, // 直线模式
      lineStyle: {
        width: 2
      }
    }
  ]
})
</script>

多条折线 ​

通过在 [series] 中添加多个对象，可以绘制多条折线。

vue
<template>
  <view>
    <ly-charts-line :option="chartOption" height="400"></ly-charts-line>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
      title: {
        text: '产品销量对比'
      },
      legend: {
        data: ['产品A', '产品B']
      },
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [
        {
          name: '产品A',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '产品B',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]
    })
</script>

平滑曲线 ​

设置 [series](file:///Users/jry/Documents/www/Ai/dify/web/app/components/app/overview/appChart.tsx#L182-L227) 中的 smooth 属性为 true，可以绘制平滑曲线。

vue
<template>
  <view>
    <ly-charts-line :option="chartOption" height="400"></ly-charts-line>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '流量趋势'
    },
    xAxis: {
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
    },
    yAxis: {},
    series: [{
      type: 'line',
      smooth: true,
      data: [120, 200, 150, 80, 70, 110, 130]
    }]
  })
</script>

填充区域 ​

通过设置 [series]中的 areaStyle 属性，可以为折线图添加填充区域。

vue
<template>
  <view>
    <ly-charts-line :option="chartOption" height="400"></ly-charts-line>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '用户活跃度'
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [{
      type: 'line',
      areaStyle: {},
      data: [120, 200, 150, 80, 70, 110]
    }]
  })
</script>

自定义样式 ​

可以通过 [color]、lineStyle 等属性自定义折线样式。

vue
<template>
  <view>
    <ly-charts-line :option="chartOption" height="400"></ly-charts-line>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '自定义样式折线图'
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [{
      type: 'line',
      color: '#ff6b6b',
      lineStyle: {
        width: 3
      },
      data: [120, 200, 150, 80, 70, 110]
    }]
  })
</script>

Props ​

参数说明类型默认值可选值
option图表配置项，格式与 ECharts 相似Object--
width图表容器宽度String | Number100%-
height图表容器高度String | Number400-

Events ​

事件名说明回调参数
click点击数据点时触发{ componentType, seriesType, seriesName, name, value, color, event }

Option 属性 ​

属性名说明类型默认值
title标题配置Object-
title.text标题文本String-
legend图例配置Object-
legend.data图例数据Array-
xAxisx轴配置Object-
xAxis.datax轴数据Array-
yAxisy轴配置Object-
series系列列表Array-
series[].type系列类型Stringline
series[].name系列名称String-
series[].data系列数据Array-
series[].color系列颜色String-
series[].smooth是否平滑曲线Booleanfalse
series[].areaStyle填充区域样式Object-
series[].lineStyle线条样式Object-
series[].lineStyle.width线条宽度Number2
series[].showSymbol是否显示数据点Booleantrue

方法 ​

方法名说明参数
setOption设置图表配置项option, notMerge
resize重新调整图表大小-