lingyun-ui-charts

图表。独立包 lingyun-ui-charts，当前版本 1.0.27。easycom 可用，不必 import。只使用本包引擎，不支持 ECharts（没有 echartsH5、echartsApp、eopts）。

容器必须有明确高度。inScrollView、ontouch 默认开启；canvasId 缺省时自动生成全局唯一 ID。

每种图的数据形状不一样，按图种看下面的专页，不要把饼图的 series 套到柱状图上。右侧预览对应 src/pages/demo/charts/<type>.vue。

图种

示例

<view class="chart-box">
  <lingyun-ui-charts
    type="column"
    :chartData="chartData"
    :opts="chartOpts"
  />
</view>

const chartData = {
  categories: ['周一', '周二', '周三'],
  series: [
    { name: '门店 A', data: [35, 36, 31] },
    { name: '门店 B', data: [18, 27, 21] },
  ],
}

const chartOpts = {}

.chart-box {
  width: 100%;
  height: 280px;
}

chartData 变化会重绘；series 为空时显示加载。

系列色

改色只动 components/lingyun-ui-charts/config.ts。不要在业务 src/config 再备一份。

import { chartColorDark } from '@/uni_modules/lingyun-ui-charts/components/lingyun-ui-charts/config'

const chartOpts = { color: chartColorDark }

也可 series[i].color。顺序 Blue → Green → Yellow → Red → Cyan → Mint → Orange → Purple → Pink。

opts 与 config.ts 里 cfu 同名 type 深合并，只写要覆盖的字段。新 formatter 加在 config.ts 的 cfu.formatter，组件上只传名字。

图例

不写 legend.columns 时，图例只显示色点和名称。要排成表，列写在 opts.legend.columns，格子写在对应的那一项上。name 前仍是色点。某一格单独变色写成 { text, color }。点某一行可隐藏该项（tapLegend，默认开）。

文字跟随主题，用 Labels 标准色：浅色 #000000，暗黑 #ffffff。点掉隐藏后，这一行改为次级标签色（浅色 rgba(60, 60, 67, 0.6)，暗黑 rgba(235, 235, 245, 0.6)），色点改为浅灰。列上的 color、格子上的 { text, color } 只在显示时生效。

action 列点击只触发 @legendAction，不会隐藏 / 显示系列；回调 item 为该行完整数据（饼类为扇区项，折线 / 柱状为系列项），同时带 legendIndex、column、event、id、opts。文字最多显示 2 个字，例如「详情」。操作列宽度至少按「文字宽 + 10px」计算，传入过窄的 width 会自动撑开；右对齐时另有 6px 内侧留白，保证文字不压到表格边框。

tableBorder 关闭时外框和内部行线都不画；开启后行线用 tableRowLine 控制（默认关，需要表格网格时显式开启），行线整宽、默认 0.5px，最后一行也画。tableGap 控制与绘图区的间距；tableShape: 'dot' 用紧凑圆点替代系列形状。左右列表格的边框高度跟随绘图区高度，每页行数按这个高度自动计算；只有需要固定行数时才设置 pageSize。

legend.overflow 默认是 page：position 为 top / bottom 时只排一行，left / right 时只排一列；超出容量显示当前页，并在横向图例右侧 / 纵向图例底部出现上下箭头。向上箭头翻上一页、向下箭头翻下一页，首页 / 末页对应箭头置灰。画布 CSS 宽度小于 520px 时，left / right 会自动改为 bottom。传 overflow: 'wrap' 可恢复旧版自动换行 / 多列布局。

position 为 top / bottom 且写了 columns 时：按表格行排版，默认一页 5 行，超出用上下箭头分页；pageSize 可改每页行数。不写 columns 的普通图例仍是一行。

word、map、arcbar、gauge 不画图例。

const chartOpts = {
  legend: {
    position: 'right',
    lineHeight: 22,
    fontSize: 12,
    columns: [
      { key: 'name', width: 72 },
      { key: 'value', width: 36, align: 'right' },
      { key: 'count', width: 20, align: 'right' },
      { key: 'rate', width: 32, align: 'right', color: '#86868b' },
      { type: 'action', text: '查看更多', width: 64, align: 'right' },
    ],
  },
}

// 饼类：写在扇区上
{ name: '小程序下单', value: 51.2, count: 5, rate: '10%' }
{ name: '业务员代下单', value: 7.2, count: 1, rate: { text: '2%', color: '#ff3b30' } }

// 柱状 / 折线等：写在 series 上
{ name: '门店 A', data: [35, 36, 31], value: 102, rate: '48%' }

圆环图完整示例见 圆环图。

属性

事件

方法

日常用 props / 事件 / ref 即可；需要底层实例时再调引擎方法（组件内 cfu.instance[canvasId]）。

组件侧怎么用

<lingyun-ui-charts
  ref="chartRef"
  type="line"
  :chartData="chartData"
  :opts="chartOpts"
  @complete="onComplete"
  @getIndex="onGetIndex"
  @getImage="onGetImage"
/>

const chartRef = ref<{ getImage: () => void; saveImage: () => void } | null>(null)

function exportPng() {
  chartRef.value?.getImage()
}

function onGetImage(e: { base64?: string }) {
  // e.base64：导出的图片数据
  console.log(e.base64)
}

改数据即可，不必手写 updateData：

chartData.series = [{ name: '门店 A', data: [40, 42, 38] }]

开启拖拽与缩放：

const chartOpts = {
  enableScroll: true,
  xAxis: { itemCount: 5, scrollShow: true },
}
// 模板另开 :onzoom="true"

组件 ref

引擎方法

updateData(data)

更新数据并重绘，不必重建实例。组件侧改 chartData / 相关 opts 即可。

chart.updateData({
  categories: ['7月', '8月', '9月'],
  series: [{ name: '销售额', data: [240, 190, 310] }],
  scrollPosition: 'current',
  animation: true,
})

stopAnimation()

立刻停掉入场动画，停在当前帧。

chart.stopAnimation()

addEventListener(type, listener) / delEventListener(type)

chart.addEventListener('renderComplete', () => {})
chart.delEventListener('renderComplete')

getCurrentDataIndex(e)

根据触摸 / 点击算数据序号。未命中 -1（或 { index: -1 }）。类目轴、饼、环、玫瑰、雷达、漏斗、词云、条状等均支持。组件优先用 @getIndex。

const current = chart.getCurrentDataIndex(e)

getLegendDataIndex(e)

点击处图例项序号，未命中 -1。对应 @getIndex 的 legendIndex。

const legendIndex = chart.getLegendDataIndex(e)

touchLegend(e, option?)

点图例切换该系列 show。option.animation 控制动画。组件开 tapLegend 即可。

chart.touchLegend(e, { animation: false })

showToolTip(e, option?)

在触摸位置画提示窗。支持 line、area、column、bar、mix、candle、scatter、bubble、mount、pie、ring、rose、funnel、radar、map、word 等。

chart.showToolTip(e, {
  formatter(item, category) {
    return `${category} ${item.name}: ${item.data}`
  },
})

组件侧用 tooltipShow、tooltipFormat（名字写在 config.ts 的 cfu.formatter）及触摸相关 props。

hideToolTip()

收起当前提示窗并重绘。组件已自动处理常见场景：移动端点击图表外任意位置关闭（页面壳触摸广播 / H5 document 监听），H5 鼠标移出图表自动关闭；也可以手动调用。

scrollStart(e) / scroll(e) / scrollEnd(e)

横向拖拽三件套。须 opts.enableScroll: true。组件在 ontouch 时自动转发。

function onTouchStart(e) {
  chart.scrollStart(e)
}
function onTouchMove(e) {
  chart.scroll(e)
}
function onTouchEnd(e) {
  chart.scrollEnd(e)
  chart.showToolTip(e)
}

translate(distance)

平移到指定偏移（与内部 _scrollDistance_ 一致），无动画。

chart.translate(-120)

zoom(val)

改一屏类目数并重算偏移。须先 enableScroll: true。val.itemCount 为一屏数量。

chart.zoom({ itemCount: 6 })

dobuleZoom(e)

双指缩放（按两指间距改 xAxis.itemCount）。须 enableScroll；组件在 onzoom + 双指 touchmove 时调用。

chart.dobuleZoom(e)

弹层里的图第一次可能量不到宽高，打开后再把 reshow 置 true。

微信：formatter 只传名字不要传函数。尺寸用 px，不要 rpx。