<VChart
  type={Taro.getEnv()}
  canvasId="chartId"
  spec={spec}
  style={{ height: '100%', width: '100%' }}
  onChartInit={chart => {}}
  onChartReady={chart => {}}
  onChartUpdate={chart => {}}
/>

版本要求

字节小程序端

需要确保 Taro 版本 >= 3.3.17 (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)

飞书小程序端

需要确保 Taro 版本 >= 3.2.0, 飞书版本 >= 3.45.0 (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)

安装

# npm
$ npm install @visactor/taro-vchart

# yarn
$ yarn add @visactor/taro-vchart

API

图表组件使用示例如下：

import VChart from '@visactor/taro-vchart';

<VChart
  type="tt"
  spec={spec}
  canvasId="pie"
  style={{ height: '35vh', width: '100%' }}
  onChartInit={chart => {
    console.log('onChartInit');
  }}
  onChartReady={chart => {
    console.log('onChartReady');
  }}
  onChartUpdate={chart => {
    console.log('onChartUpdate');
  }}
/>;

API	类型	说明
type	String	配置的环境，目前组件支持的环境有：字节小程序('tt')，飞书小程序('lark')，浏览器('web')，h5 移动端('h5')，如果没有声明，则会通过 `Taro.getEnv()` 自动获取
canvasId	String	图表 id, 必确唯一
spec	Object	图表配置项, 请参考VChart 配置项
style	Object	图表容器样式
events	Object[]	事件绑定配置，具体配置为定义如下
options	Object	初始化 VChart 实例传入的额外配置项，同 VChart 实例化配置项
onChartInit	Function	图表初始化完后触发的回调
onChartReady	Function	图表渲染完毕后触发的回调
onChartUpdate	Function	图表更新完毕后触发的回调

事件配置

interface IEvent {
  /**
   * 事件的名称
   */
  type: EventType;
  /**
   * 事件 API 中的事件筛选配置
   */
  query?: EventQuery;
  /**
   * 事件监听函数
   */
  handler: EventCallback<EventParams>;
}

type 代表事件名称，支持的值详见：事件分类
query 事件 API 中的事件筛选配置，使用详见：事件过滤
handler 即事件监听函数，函数的参数类型详见：事件参数

快速上手

import React, { useState } from 'react';
import { View } from '@tarojs/components';
import VChart from '@visactor/taro-vchart';

export function Pie() {
  // 1. 准备图表配置项与数据
  const [spec, setSpec] = useState({
    data: [
      {
        id: 'data1',
        values: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 235,
            name: '视频广告'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
        ]
      }
    ],
    type: 'pie',
    outerRadius: 0.6,
    innerRadius: 0.5,
    categoryField: 'name',
    valueField: 'value',
    legends: {
      visible: true
    }
  });

  // 向Chart组件, 传递参数.
  return (
    <View
      style={{
        border: '1px solid #eeeeee',
        width: '90vw'
      }}
    >
      <VChart
        type="tt"
        spec={spec}
        canvasId="pie"
        style={{ height: '35vh', width: '100%' }}
        onChartInit={() => {
          console.log('init pie');
        }}
        onChartReady={() => {
          console.log('ready pie');
        }}
        onChartUpdate={() => {
          console.log('update pie');
        }}
      />
    </View>
  );
}

常用示例

图表状态更新

图表内部, 监听了 spec 的变化. 当 spec 变化时, 则会基于新的 spec 更新图表。

此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作（可以通过 onChartInit 接口, 获取到 VChart 实例）。

下面是 VChart 实例上提供的较常用的 API：

chartInstance.renderAsync() 渲染图表
chartInstance.release() 销毁图表
chartInstance.updateSpec() 基于 Spec 更新图表
chartInstance.updateData() 基于数据更新图表

详细使用方法请参考:VChart API

示例

兼容 React 的状态管理方式. 通过 setState 更新配置项, 图表即可重绘.

import React, { useEffect, useState } from 'react';
import { View } from '@tarojs/components';
import VChart from '@visactor/taro-vchart';

export function Pie() {
  const [spec, setSpec] = useState({
    data: [
      {
        id: 'data1',
        values: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 235,
            name: '视频广告'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
        ]
      }
    ],
    type: 'pie',
    outerRadius: 0.6,
    innerRadius: 0.5,
    categoryField: 'name',
    valueField: 'value',
    legends: {
      visible: true
    }
  });

  useEffect(() => {
    setTimeout(() => {
      setSpec({
        data: [
          {
            id: 'data1',
            values: [
              {
                value: 335,
                name: '直接访问'
              },
              {
                value: 310,
                name: '邮件营销'
              }
            ]
          }
        ],
        type: 'pie',
        outerRadius: 0.6,
        innerRadius: 0.5,
        categoryField: 'name',
        valueField: 'value',
        legends: {
          visible: true
        }
      });
    }, 3000);
  }, []);

  return (
    <View
      style={{
        border: '1px solid #eeeeee',
        width: '90vw'
      }}
    >
      <VChart
        type="tt"
        spec={spec}
        canvasId="pie"
        style={{ height: '35vh', width: '100%' }}
        onChartInit={() => {
          console.log('init pie');
        }}
        onChartReady={() => {
          console.log('ready pie');
        }}
        onChartUpdate={() => {
          console.log('update pie');
        }}
      />
    </View>
  );
}

如何开发

# 因为 taro-vchart 依赖 vchart 的编译结果，所以先要运行如下命令
$ rush run -p @visactor/vchart -s build:es5

# 运行 lark 小程序
$ rush run -p @visactor/taro-vchart -s dev:lark


# 运行微信小程序
$ rush run -p @visactor/taro-vchart -s dev:wx

然后使用飞书开发者工具导入 packages/taro-vchart/dist/lark 或者 packages/taro-vchart/dist/weapp 目录即可。

Keywords

FAQs

What is @visactor/taro-vchart?

Is @visactor/taro-vchart popular?

Is @visactor/taro-vchart well maintained?

Package last updated on 07 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install