Easy Visual

Easy Visual (easyvis)是一个基于 d3.js的可视化工具包, 使用SVG进行绘制，内置了常用的图形，使用简单。

通过 npm 进行安装 :

npm install --save easyvis

使用 : 请参考示例

主要特点

1. 使用简单 : 相对于 EChart / ANTV 等框架，EasyVis 简化了大量的参数，所有图形的基础参数都保持一致，降低理解难度。
2. 使用 TypeScript 进行编译，提供完整的代码说明，可在IDE里面看TIPS。
3. 通过CSS控制样式。可以定义皮肤变量(scss)，或使用CSS覆盖重写修改一些显示参数。
4. 可扩展，自定义绘制方法、绘制函数。
5. 支持 React

Quick Start

第一步：引入样式

1) scss 方式

@import '~/node-modules/easyvis/scss/_index'

2) scss 方式:自定义皮肤

@use "~/node-modules/easyvis/scss/_index" with(
    $darkMode :true,
    $colors:(#FF6338, #FA914B, #FA8EF1, #A96BFF, #2F84FA, 
        #1BE02F, #F2C17C, #65AABF, #7D8AE8, #69B5E0),
    $axis-domain:rgba(#ccc, 0.7),
    $axis-text: rgba(#ffffff, 60%), //#BAB6AB;
    $axis-text-hover:#FFE5C4,
    $hbar-separate:rgba(#D1C9D0, 0.5),
    // tip
    $tip-border:#828387,
    $tip-bg: rgba(#828785, 0.6),
    $tip-h2: #6BBCFF,
    $tip-h2-shadow: rgba(#6BBCFF, 0.1),
    $tip-txt: #E7EBD3,
    $tip-txt-label: #cccccc,
    $tip-txt-value: #cccccc,
    $tip-txt-current: #FEFFF7,
);

3)css 方式

<link rel="stylesheet" href="~/node-modules/easyvis/scss/visual.css" />

第二步：定义图形

import { Pie } from 'easyvis';
var graph = new Pie('#app', {
    labelField:  "name",
    valueField:  "count",
    valueLabel:  "数量"
});

第三步：设置数据

graph.setData([
    {name: "陕西省",count: 111},
    {name: "四川省",count: 222},
]);

在 React 中使用

在react中使用时，在路径上加上react即可引出相应的组件。

import { Pie } from 'easyvis/react';
var data = [
    {name: "广东省",count: 2963183},
    {name: "北京市",count: 4721003},
    {name: "海南省",count: 4601660},
    {name: "福建省",count: 6734645},
];

// Render 方法
remder = () => <Pie
    labelField="name"
    valueField="count"
    valueLabel="数量"
    data={data}
/>

重要说明

1. 本项目是个人项目，修复看时间，维护看心情，情谨慎使用，谢谢。
2. 由于目前代码丑陋，暂不开源，但发布的JS也没混淆。