零云®lyCharts v26

Appearance

Bar 柱状图 ​

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

平台差异说明 ​

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

基础柱状图 ​

通过在 [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-
xAxisx轴配置Object-
xAxis.datax轴数据Array-
yAxisy轴配置Object-
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重新调整图表大小-