@tanzhenxing/zx-charts-bar v1.0.2

zx-charts-bar 横向柱状图组件

一个灵活的横向柱状图组件，支持 H5、小程序和 App 平台。

特性

• 跨平台兼容性（H5、微信小程序、App）
• 可自定义样式和动画
• 支持堆叠式柱状图
• 交互式点击事件和工具提示
• 值格式化
• 动态颜色支持
• 不依赖浏览器特有的 DOM API

安装

在 UniApp 项目中引入组件：

// 在 pages.json 中注册组件
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "zx-charts-bar": "@/components/zx-charts-bar/zx-charts-bar.vue"
    }
  }
}

// 或者直接在页面中导入
import zxChartsBar from '@/components/zx-charts-bar/zx-charts-bar.vue'

基本用法

<template>
  <view class="chart-container">
    <zx-charts-bar 
      :width="600" 
      :yAxis="yAxisData" 
      :min="0" 
      :max="100"
      ref="barChart"
    />
    <button @click="loadChart">加载图表</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const barChart = ref(null);
const yAxisData = ['类别1', '类别2', '类别3', '类别4'];

const loadChart = () => {
  barChart.value.draw([
    {
      name: '系列1',
      color: '#007AFF',
      source: [45, 65, 78, 32]
    },
    {
      name: '系列2',
      color: '#FF6B22',
      source: [30, 55, 28, 70]
    }
  ]);
};

onMounted(() => {
  loadChart();
});
</script>

API 参考

属性

事件

方法

数据集格式

数据集应该是一个系列对象的数组：

[
  {
    name: '系列名称',         // 图例显示名称
    color: '#007AFF',        // 柱状条颜色（可被colorFormatter覆盖）
    source: [45, 65, 78, 32], // 对应Y轴项的值
    colorFormatter: (val) => { // 可选函数，动态设置颜色
      return val > 50 ? '#FF6B22' : '#007AFF';
    }
  },
  // 其他系列...
]

高级示例

堆叠柱状图

<template>
  <zx-charts-bar
    :width="600"
    :yAxis="['Q1', 'Q2', 'Q3', 'Q4']"
    :isStack="true"
    :min="0"
    :max="100"
    :legend="{ show: true, size: 26, color: '#666' }"
    ref="stackedBarChart"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const stackedBarChart = ref(null);

onMounted(() => {
  stackedBarChart.value.draw([
    {
      name: '产品A',
      color: '#007AFF',
      source: [20, 15, 25, 30]
    },
    {
      name: '产品B',
      color: '#FF6B22',
      source: [15, 20, 10, 25]
    },
    {
      name: '产品C',
      color: '#8E44AD',
      source: [10, 15, 20, 15]
    }
  ]);
});
</script>

动态颜色格式化

<template>
  <zx-charts-bar
    :width="600"
    :yAxis="departments"
    :min="0"
    :max="100"
    :tooltip="true"
    ref="dynamicColorChart"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const dynamicColorChart = ref(null);
const departments = ['人力资源', '销售', '市场营销', '工程', '支持'];

onMounted(() => {
  dynamicColorChart.value.draw([
    {
      name: '绩效',
      color: '#007AFF',
      source: [65, 82, 45, 90, 72],
      colorFormatter: (val) => {
        if (val >= 80) return '#34C759'; // 绿色表示高绩效
        if (val >= 60) return '#007AFF'; // 蓝色表示良好绩效
        return '#FF3B30'; // 红色表示低绩效
      }
    }
  ]);
});
</script>

跨平台注意事项

该组件适用于所有平台（H5、微信小程序和App），无需任何平台特定的修改。以下是一些额外的提示：

• 组件使用 Vue 3 的 Composition API（setup 语法），提供更好的性能和代码组织
• 所有样式使用 rpx 单位，确保在不同设备上正确缩放
• 使用 UniApp 的条件编译指令处理不同平台的细微差异（如 H5 的鼠标指针样式）
• 不使用任何浏览器特有的 DOM API，确保在小程序和 App 中正常运行