凌云UI 使用手册
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
  • 图表

    • 图表
    • 柱状图
    • 堆积图
    • 条状图
    • 折线图
    • 曲线图
    • 区域图
    • 饼图
    • 圆环图
    • 玫瑰图
    • 漏斗图
    • 雷达图
    • 仪表盘
    • 圆弧进度
    • 山峰图
    • 混合图
    • 散点图
    • 气泡图
    • K 线图
    • 词云图
    • 地图
    • 时间轴折线
    • 时间轴区域

山峰图 · mount

山峰图。type="mount"。Demo 页:/pages/demo/charts/mount。

数据

没有 categories。峰写在 series[0].data:{ name, value }。引擎会把每一项拆成一条序列。

正负山峰的 value 可以是负数。默认 Y 轴 min 是 0,负值会被裁在零轴上,需要在 opts.yAxis.data 里把 min / max 设成能包住数据的范围。

图例默认单行 / 单列;超出容量只显示当前页,右侧或底部出现上下箭头翻页。窄屏下左右图例会强制落到底部。要恢复旧布局,传 legend.overflow: 'wrap'。

峰形

写在 extra.mount.type。

type效果示例里的其它字段
mount圆角山峰(默认)widthRatio: 1.5
sharp尖角widthRatio: 1.5
triangle三角widthRatio: 1 或 1.5
bar直角柱widthRatio: 0.8;胶囊柱再用 barBorderRadius: [50, 50, 50, 50],并把 widthRatio 收到 0.3

widthRatio 是峰宽相对类目间距的比例,范围 0–2。

渐变:linearType: "custom" 用引擎内置渐变色;linearType: "opacity" 从峰顶透明过渡到系列色,透明度看 linearOpacity。描边用 borderWidth,0 为无边。

横向滚动:enableScroll: true,xAxis.itemCount 小于类目数,xAxis.scrollShow: true。

标记线:enableMarkLine: true,线写在 extra.markLine.data。右侧标签要留白时把 padding 右侧加大(示例用 [15, 40, 0, 15])。

示例

<view class="chart-box">
  <lingyun-ui-charts
    type="mount"
    :chartData="chartData"
    :opts="chartOpts"
  />
</view>
const chartData = {
  series: [
    {
      data: [
        { name: '一班', value: 82 },
        { name: '二班', value: 63 },
        { name: '三班', value: 86 },
        { name: '四班', value: 65 },
        { name: '五班', value: 79 },
      ],
    },
  ],
}

const chartOpts = {
  extra: {
    mount: {
      type: 'mount',
      widthRatio: 1.5,
    },
  },
}
.chart-box {
  width: 100%;
  height: 280px;
}

接法、属性、事件见 图表总览。

Edit this page
最近更新: 2026/10/28 11:16
Contributors: qiu, Claude Fable 5
Prev
圆弧进度
Next
混合图