零云®lyCharts v26

Appearance

Bar 柱状图 ​

柱状图是一种使用矩形条表示数据大小的图表，用于比较不同类别的数据。

平台差异说明 ​

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

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

基础柱状图 ​

通过在 [series] 中添加对象，可以绘制柱状图。

vue
<template>
  <view>
    <ly-charts-bar ref="uChartsBar" :options="chartOption"
				:height="220" @click="handleBarClick"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
      title: {
        text: '销售数据统计',
        textStyle: {
          fontSize: 16,
          color: '#333'
        }
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      series: [{
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: '#5470c6'
        }
      }, {
        name: '订单量',
        type: 'bar',
        data: [60, 80, 90, 50, 40, 70, 85],
        itemStyle: {
          color: '#91cc75'
        }
      }],
      legend: {
        top: 0,
        data: ['销售额', '订单量'],
        textStyle: {
          color: '#666'
        }
      },
      backgroundColor: 'transparent'
    })
</script>

堆叠柱状图 ​

通过设置 [series] 中的 [stack]属性，可以实现堆叠柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '销售数据统计'
    },
    legend: {
      data: ['销售额', '订单量'],
      bottom: 0
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [
      {
        name: '销售额',
        type: 'bar',
        stack: 'order',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: '#5470c6'
        }
      },
      {
        name: '订单量',
        type: 'bar',
        stack: 'order',
        data: [60, 80, 90, 50, 40, 70, 85],
        itemStyle: {
          color: '#91cc75'
        }
      }
    ]
  })
</script>

温度计形图 ​

通过设置两个堆叠的柱状图，其中一个使用透明色，可以实现温度计效果。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '温度计形柱状图'
    },
    legend: {
      data: ['销量', '订单量'],
      top: 0
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      stack: 'order',
      data: [120, 180, 150, 90, 110],
      itemStyle: {
        color: '#94C973',
        borderColor: '#3992DE',
        borderWidth: 1
      }
    }, {
      name: '订单量',
      type: 'bar',
      stack: 'order',
      data: [60, 80, 90, 50, 40, 70, 85],
      itemStyle: {
        color: 'rgba(142, 230, 157, 0.4)'
      }
    }]
  })
</script>

圆角柱状图 ​

通过设置 [series] 中的 itemStyle.borderRadius 属性，可以实现圆角柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '圆角柱状图示例'
    },
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [120, 180, 150, {
        value: 80,
        itemStyle: {
          color: '#ff6b6b',
          borderColor: '#b56bff',
          borderWidth: 1
        }
      }, 110],
      itemStyle: {
        color: '#2ed573',
        borderRadius: 10
      }
    }]
  })
</script>

山峰形状柱状图 ​

通过设置 [series] 中的 [symbol]属性为 mountain，可以实现山峰形状的柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '山峰图示例'
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      symbol: 'mountain',
      data: [120, 180, 150, 90, 110],
      itemStyle: {
        color: '#5470c6'
      }
    }]
  })
</script>

圆角山峰形状柱状图 ​

通过设置 [series] 中的 [symbol]属性为 roundedMountain，可以实现圆角山峰形状的柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '圆角山峰图示例'
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      symbol: 'roundedMountain',
      data: [120, 180, 150, {
        value: 90,
        itemStyle: {
          color: '#1990FF'
        }
      }, 110],
      itemStyle: {
        color: '#91cc75'
      }
    }]
  })
</script>

尖角山峰形状柱状图 ​

通过设置 [series] 中的 [symbol]属性为 sharpMountain，可以实现尖角山峰形状的柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '尖角山峰图示例'
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      symbol: 'sharpMountain',
      data: [120, 180, 150, 90, 110],
      itemStyle: {
        color: '#fac858'
      }
    }]
  })
</script>

自然山峰形状柱状图 ​

通过设置 [series] 中的 [symbol]属性为 realMountain，可以实现自然山峰形状的柱状图。

vue
<template>
  <view>
    <ly-charts-bar :options="chartOption" height="400"></ly-charts-bar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '自然山峰图示例'
    },
    xAxis: {
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      symbol: 'realMountain',
      data: [120, 180, 150, {
        value: 90,
        itemStyle: {
          color: '#1990FF'
        }
      }, 110],
      itemStyle: {
        color: '#91cc75'
      }
    }]
  })
</script>

Props ​

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

Events ​

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

Options 属性 ​

属性名说明类型默认值
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系列类型Stringbar
series[].name系列名称String-
series[].data系列数据Array-
series[].stack堆叠分组名称String-
series[].symbol柱状图形状Stringrect
series[].itemStyle柱状图样式Object-
series[].itemStyle.color柱状图颜色String-
series[].itemStyle.borderColor边框颜色String-
series[].itemStyle.borderWidth边框宽度Number0
series[].itemStyle.borderRadius圆角大小Number0

Symbol 类型 ​

类型说明
rect矩形（默认）
rounded圆角矩形
mountain山峰形状（三角形）
roundedMountain圆角山峰形状
sharpMountain尖角山峰形状
realMountain自然山峰形状

方法 ​

方法名说明参数
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: 'bar', data: [120, 200, 150] },
    { name: 'Profit', type: 'bar', 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: 'bar', encode: { x: 'month', y: 'sales' } }
  ]
}