常见问题 FAQ

部分参数无效
EasyVis 统一了一些常用图形的配置规范，文档方面，所有图形都包含，比如坐标轴，图例等。
但部分图形不具备功能，比如饼图没有坐标轴，所以配置了坐标轴也无效，但由于是通用配置，所以 TypeScript 并不会提示错误。
图形出不来
- DOM 模式, 配置图形前，挂载容器宽高要能取到。
- React 模式, 配置图形前，图形的父组件宽高要能取到。
- 图形会自动监听 window resize 事件，当 Resize 时，图形会自动适应。

如何引入样式 or 自定义样式

目前默认提供了两套样式，可通过 css / scss 引入（说明：VAP项目内部已经集成了样式，无需额外操作）

/**
* 引入默认亮色系样式
*/ 
@import '../node_modules/easyvis/scss/visual.scss';
/**
* 或者 引入默认暗色系样式
*/
@import '../node_modules/easyvis/scss/visual-dark.scss';

另外也可以自定义样式，相关的变量可以在 node_modules/easyvis/scss/_variable.scs 中查询

/**
* 使用一套新的颜色，定义一套暗色皮肤 
*/ 
@use '../node_modules/easyvis/scss/index' with(
$darkMode :true,
$colors:(
    #FF6338, #FA914B, #FA8EF1,
    #A96BFF, #2F84FA, #1BE02F,
    #F2C17C, #65AABF, #7D8AE8,
    #69B5E0
),
);
/**
* Custom : More ，可以附加自定义样式，或覆盖原样式，需要使用SVG的样式规范
*/

设置全局变量

一般情况不需要改动，默认已经内置，可以通过 setDefault 方法对一项或多项进行改动。

目前支持全局自定义的参数如下，更多参数正在支持中

import { GlobalUtil } from 'easyvis/_utils';

GlobalUtil.setDefault({     // 全局通用设置
prefix: '',             // 自定义前辍
className: '',          // 自定义附加 class 类名称 
duration: 666,          // 图形切换数据时的过渡时间
maxcount: 10,           // 默认最大显示的数量
grid: {                 // 默认显示区域
    top: 12,
    left: 12,
    right: 12,
    bottom: 12,
},            
tip: {                  // 默认提示的时间延时
    delay: 100,
    durationShow: 350,
    durationHide: 200
},
})

可以加入背景吗

如果容器在初始化时就已经包含了子元素，子元素会自动转换成背景

普通模式

// HTML 代码
<div id="app">
<div style="margin:20px auto;background-image:url(xxx)">  
    <h5 style="text-align:right;">标题</h5>
</div> 
</div>
// JavaScript 代码
import { Pie } from 'easyvis';
// div#app 下的子元素会变成饼图背景
var graph = new Pie('#app', {
labelField:  "name",
valueField:  "count",
valueLabel:  "数量"
});

React 模式

import { Pie } from 'easyvis/react';
// Render 方法
remder = () => <Pie
labelField="name"
valueField="count"
valueLabel="数量"
data={data} >
<div style={{margin:'20px auto';backgroundImage:'url(xxx)'}}>  
    <h5 style={{textAlign:'right'}}>标题</h5>
</div> 
</Pie>

是否支持 Vue
正在计划支持中
性能如何？
一、从浏览器原理层来说基于 Dom 的性能肯定是不及基于 Canvas 的相关框架，不过本工具内部作了各种优化，大幅度的降低渲染计算量。
二、目前本工具都是渲染的简单图形，数据量最多不过几百，对于目前浏览器性能来讲几乎可以忽略不计。
三、对于数据量极大（一万以上），不适用，可以先处理后再使用本工具

常见问题 FAQ

部分参数无效

图形出不来

如何引入样式 or 自定义样式

设置全局变量

可以加入背景吗

是否支持 Vue

性能如何？