piechart-3d v3.3.1

piechart-3d

基于threejs开发的3D饼状图

安装

npm install piechart-3d
# OR
yarn add piechart-3d

使用

示例

import Pie from 'piechart-3d';

const options = {
  debug: false,
  data: [16406.8, 50256, 15752, 19467.6, 112249.6, 18601.6],
  innerRadius: 0,
  outerRadius: 100,
  cornerRadius: 0,
  padAngle: 0,
  height: 20,
  activeAnimation: {
    duration: 0.25,
    heightScale: 2,
  },
  label: {
    show: true,
    position: 0.75,
    render({ percent, color }) {
      const div = document.createElement('div');
      div.innerText = Number((percent * 100).toFixed(2)) + '%';
      div.style.background = color;
      return div;
    },
  },
  autoplay: false,
  on: {
    mouseenter(e) {
      console.log('mouseenter', e);
    },
    mouseleave(e) {
      console.log('mouseleave', e);
    },
    active(e) {
      console.log('active', e);
    },
  },
};

const pie = new Pie('.chart', options);

// 销毁实例
pie.dispose();

配置项

备注

colors默认值

[
  '#3b82f6', // blue
  '#f43f5e', // rose
  '#f97316', // orange
  '#22c55e', // green
  '#eab308', // yellow
  '#06b6d4', // cyan
  '#d946ef', // fuschia
  '#8b5cf6', // violet
  '#84cc16', // lime
  '#6366f1', // indigo
  '#ec4899', // pink
  '#a855f7', // purple
  '#0ea5e9', // lightBlue
  '#14b8a6', // teal
  '#10b981', // emerald
  '#f59e0b', // amber
  '#ef4444', // red
];

lights默认值

[
  {
    type: 'AmbientLight',
    color: '#fff',
    intensity: 0.3,
  },
  {
    type: 'SpotLight',
    color: '#fff',
    intensity: 1,
    position: [5, 5, 5],
  },
];

支持AmbientLight、PointLight、SpotLight、DirectionalLight等灯光效果，每种灯光支持配置属性有color、intensity、position。

label配置

饼图标签项配置，默认值如下：

{
  show: false, // 是否显示
  position: 0.7, // 标签显示位置占比。注意，如果值为`0`，则为中心展示，此时只显示激活项标签
  render: null, // 标签渲染函数，参数同事件参数，返回值为`dom`元素
}

activeAnimation配置

默认不开启动效，如果该项配置存在，则开启动效。

{
  duration: 0.75, // 动效时长
  heightScale: 2,  // 激活块高度缩放，如默认高度的2倍
}

autoplay配置

默认值为false，不开启自动播放。该项值接受布尔值和数值，如果需要开启自动播放，可设置为true或具体数值，单位秒。如果为true，则为3s，如果为数值，则取值在1-10之间。

on配置

默认值为null，如果需要监听事件，可进行相应配置，配置示例如下：

{
  mouseenter(e) {
    console.log('mouseenter', e);
  },
  mouseleave(e) {
    console.log('mouseleave', e);
  },
  active(e) {
    console.log('active', e);
  },
}

事件参数

事件参数非原生事件参数，封装值如下：

{
  index,  // 触发项序号
  value,  // 触发项值
  percent, // 触发项占比（0-1）
  color, // 触发项色值
}

实例方法

setLegendChecked

为了实现图例的自定义，图例需自行实现，该方法提供图例与饼图的控制交互。

该方法参数为回调函数，该回调函数的参数为数据等长的数组，示例如下：

[true, true, true];

每一项对应饼图的对应块，通过布尔值可以控制对应块的显示与隐藏。该回调函数的返回值应为等长的布尔值数组。使用示例如下：

pie.setLegendChecked((legends) => {
  legends[index] = checked;
  return legends;
});

activate和deactivate

这两个方法用于触发饼图的激活和取消激活。activate方法接受一个数值参数，该数值为对应激活块的序号。deactivate方法无参数。

dispose

该方法用于销毁实例，当组件卸载的时候需手动调用。