零云®lyCharts v26

Appearance

Line 线状图 ​

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

平台差异说明 ​

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

普通 Vue、uvue 和 uni-app-x 图表均通过公共 ly-canvas 画布层初始化；微信小程序端由公共层启用 type="2d" 模式。

基础折线图 ​

通过在 [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
      },
      label: {
          show: true, // 显示标签
          color: '#666',
          position: 'top' // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
      }
    }
  ]
})
</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-
legend.selected初始系列选中状态，false 时隐藏对应系列Object-
tooltip提示框配置Object-
tooltip.formatter提示框内容格式化，支持字符串模板；Vue 端也支持函数String | Function-
dataZoom数据窗口配置，按 x 轴索引裁剪可视数据Array | Object-
xAxisx轴配置Object-
xAxis.datax轴数据Array-
xAxis.axisLinex轴轴线配置Object-
xAxis.axisLine.show是否显示x轴轴线Booleantrue
yAxisy轴配置Object-
yAxis.axisLiney轴轴线配置Object-
yAxis.axisLine.show是否显示y轴轴线Booleanfalse
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
series[].label.show是否显示数据点数值标签Booleanfalse
series[].label.color显示数据点数值标签文字颜色String#666
series[].label.positon显示数据点数值标签位置Stringtop

方法 ​

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

ECharts 运行时兼容 API ​

组件实例支持一组常用 ECharts 风格方法，适合通过 ref 调用：

方法名说明参数
setOption设置图表配置项；notMerge 为 true 时不合并旧配置option, notMerge
getOption获取当前规范化后的图表配置-
resize重新测量并绘制图表-
clear清空画布并重置当前交互状态-
dispose销毁当前图表实例状态，后续绘制调用将被忽略-
showLoading显示轻量加载态textOrOptions
hideLoading隐藏加载态并重绘当前配置-
getWidth获取当前画布宽度-
getHeight获取当前画布高度-
on监听图表事件eventName, handler
off移除图表事件监听eventName, handler?
dispatchAction触发支持的图表行为action
appendData向指定系列末尾追加数据
convertToPixel将数据坐标转换为像素坐标finder, value
convertFromPixel将像素坐标转换为数据坐标finder, value
containPixel判断像素点是否落在坐标系/系列附近finder, value

当前能力已在源码中实现，需等待后续发版后才会进入插件市场版本。

dispatchAction 当前支持 showTip、hideTip、legendToggleSelect、dataZoom、highlight、downplay、select、unselect、toggleSelect。折线图的 dataZoom 会裁剪 xAxis.data 与各系列 data 的可视窗口，不渲染滑块 UI；highlight / downplay 和选中类 action 只影响运行时视觉状态，不改写传入的 option 数据。

js
chartRef.value?.dispatchAction({ type: 'showTip', dataIndex: 2, seriesIndex: 0 })
chartRef.value?.dispatchAction({ type: 'legendToggleSelect', name: 'Profit' })
chartRef.value?.dispatchAction({ type: 'dataZoom', start: 20, end: 80 })
chartRef.value?.dispatchAction({ type: 'dataZoom', startValue: 2, endValue: 8 })
chartRef.value?.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'select', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'toggleSelect', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'unselect', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.appendData({ seriesIndex: 0, data: [120, 140] })
chartRef.value?.dispatchAction({ type: 'hideTip' })

convertToPixel / convertFromPixel 当前仅支持主直角坐标系。折线/柱状图的 value 形如 [categoryIndex, yValue]，categoryIndex 可为小数并按类目中心插值；containPixel 默认判断是否落在绘图区内，传入 seriesIndex 时会进一步判断是否靠近该系列点。本批坐标转换 API 已在源码中实现，需等待后续发版后进入插件市场版本。

js
const pixel = chartRef.value?.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [1, 120])
const data = chartRef.value?.convertFromPixel(null, pixel)
const inside = chartRef.value?.containPixel({ seriesIndex: 0 }, pixel)

legend / dataZoom / tooltip.formatter ​

legend.selected 可控制初始系列显隐，隐藏系列不会参与绘制、命中检测、提示框聚合和数值范围计算：

js
const option = {
  legend: {
    selected: {
      Sales: true,
      Profit: false
    }
  },
  xAxis: { data: ['1月', '2月', '3月'] },
  series: [
    { name: 'Sales', type: 'line', data: [120, 200, 150] },
    { name: 'Profit', type: 'line', data: [30, 80, 60] }
  ]
}

tooltip.formatter 支持 {a} / {seriesName}、{b} / {name}、{c} / {value} 等字符串模板。Vue 组件支持函数 formatter；uvue 中函数 formatter 会安全退回默认提示框内容。

js
const option = {
  tooltip: {
    formatter: '{a} {b}: {c}'
  }
}

dataset / encode ​

折线图支持基础 dataset.source + series.encode 预处理，会自动生成 series.data 与 xAxis.data：

js
const option = {
  dataset: {
    source: [
      ['month', 'sales', 'profit'],
      ['1月', 120, 30],
      ['2月', 200, 80]
    ]
  },
  series: [
    { type: 'line', encode: { x: 'month', y: 'sales' } }
  ]
}