起步
@1.在vue项目中通过 :cnpm install @jiaminghi/data-view进行安装组件
@2.引入
@2.1 在main.js中进行全局引入
@2.2 按需引入，仅支持ES module的tree shaking
使用
@1. 全屏容器
数据可视化页面一般在游览器全屏播放，使用全屏容器可以填充整个屏幕。
全屏容器使用：
Tips：使用时最好设置全局样式，将body的margin，padding设为0，以提供更好的展示。
@2. Loading加载
在页面加载过程中可以使用，dv-loading可以提供加载动画。
@3.边框
@3.1使用事项
1. 边框内样式
内部填充物相当于被slot插槽塞入了边框组件下的class名为：border-box-content的容器中，所以我们需要进行样式调整时，可以对其class进行修改
2. 组件化使用
建议使用组件化开发，把边框内的节点作为单独组件的形式置入边框中。这是Vue中slot的渲染导致的，如果你要在生命周期：mounted之后对置入边框内的节点进行DOM操作，绘制echarts图等，可能会出现获取不到的情况，使用组件置入会避免这类事情发生。
3. 宽高变化
如果边框所在的父容器宽高变化，导致边框没有随之变化，我们可以使用组件内置的initWH方法来重置边框组件的宽高，以避免宽高变化导致的一系列问题的产生。
@3.2 背景颜色
可以设置边框颜色（color），边框内部背景颜色（backgroundColor），color支持一主一副两种颜色。
@3.3 具体样式
共有十几款不同样式，不一一例举，具体样式请详见：请点这里
基本用法：
@4.装饰物
@4.1 背景颜色
与边框类似，装饰都支持自定义颜色，配置也类似边框设置，可以设置一主一副双色。
@4.2具体样式
也有十几款样式，具体事例，可详见：点我
其中有几个特殊样式，例如
其为一段不断延长的射线，可以设置其动画速度：dur
扫描图样式的dv-decoration-12，可设置其扫描动画和光晕动画
@5.图表
@5.1基本
图表组件是基于chart的封装，如果我们使用，我们只需要将图表对应的option数据传入就可以了
Option数据按你需要的写入就可以了。
大部分配置项都有其默认配置，我们只需要配置个别属性就可以生成需要图表。如需设计个性化图表，需要对，样式，动画，颜色等进行设置，以下为主要需要做的配置项:
如果我们需要修改默认配置，可以如下图，进行引用。
@5.2 title
title标签是用来显示图表的标题的，有以下可以设置的标签
show：是否展示标签（默认true）
text:标题文字
offset：标题位置偏移
style：标题样式（经常使用），写法如下
rLevel:标题渲染效果（默认20），暂时没用过
animationCurve：标题缓动曲线（默认easeOutCubic），没用过
animationFrame：标题缓动帧数（默认50），没用过
@5.3 legend
legend即是为图表提供标签，以下为常用的，全部请看文档
left,right,top,bottom:图例标签的边距
data：构成图例标签的数据（以数组形式）
textstyle：标签文字默认样式
@5.4 xAxis，yAxis
xAxis，yAxis用来设置x，y坐标轴，值可以为对象或者数组，以下为常用
name:设置坐标轴的名称
data：设置坐标轴的标签内容，xAxis为横向，yAxis为纵向
positon：设置坐标轴位置
nameTextStyle：可以设置坐标轴名称的样式
axisLabel：可以设置坐标轴标签的样式
@5.5 grid
grid主要是配合坐标系工作，配置它，可以设置坐标系的宽高大小（没用过）
主要也是left，right，top，bottom等等基础设置，详见文档
@5.6 radar
Radar主要是为了雷达图提供坐标系支持，如果需要使用雷达图，需要使用该配置，常用如下，详情完整个性化件见文档
Indicator：指示器，常用name（指示符标签名），max（指示符最大值）
Show：是否显示该雷达图坐标系（默认true）
Center：坐标系中心点（默认[50%,50%]，中心）
Radius：坐标系半径
@5.7 实用series
可以通过series来配置我们需要的各种图表信息，以下为几个常用图表
@5.7.1.折线图
通过配置上面几个常用选项（xAxis，yAxis，title这些），以及定制化的series对应的属性：设置series,type为line，即为折线图，具体某些定制化样式，详见文档。
定制化方面常用的有
stack：控制数据堆叠时谁显示在上面，类似z-index
data：设置我们需要展示的数据信息（数组形式）
@5.7.2. 柱状图
基础配置同上，定制化的series对应属性：type设为bar，定制化样式具体api，也可见上方折线图列出的文档
定制化相关主要为优化显示，例如横向柱状图，就是讲data绑定在yAxis中
效果如下：
@5.7.3 饼状图
基础配置同上，定制化的series对应属性：type设为pie，定制化样式具体api，也可见上方折线图列出的文档
定制化主要就是样式优化
insideLabel：控制饼状图旁边的label是否显示
roseType：玫瑰形饼状图
radius：环形饼状图（数组['40%', '50%']）
@5.7.4 雷达图
基础配置同上，定制化的series对应属性：type设为radar，定制化样式具体api，也可见上方折线图列出的文档
特别的是，需要用到我们@5.6的radar的相关配置，具体常用见5.6所列。
Indicator：控制了，外侧指示符显示的数值和大小
Polygon：控制是否显示多边形坐标系（Boolean类型）
axisLine：坐标轴线的配置
splitArea：坐标系分隔区配置（实现多种颜色雷达图）
@5.7.5. 仪表盘
基础配置同上，定制化的series对应属性：type设为gauge，定制化样式具体api，也可见上方折线图列出的文档
常用的专业化配置：
Details：用于控制轮盘中间的显示文字，show用来设置是否展示，formatter用来填写需要显示的信息
axisLabel：坐标标签配置项，数据会自动计算，可以设置其formatter格式
一个基本仪盘表大概配置如下
@6.动态环图
是基于Charts的封装，data等数据都写在config中
Config中配置具体需要显示的数据，可配置项如下：
常用的有：
Data：用来写展示的具体数据，
Radiu：控制环半径的显示。
@7.胶囊柱图
常用的Config如下：
Data：可以设置柱显示的数据，需要用数组写入，有name，value
Color：控制柱子每项的颜色
@8.水位图
常用config如下：
Shape：控制水位图的形状，默认rect，可选：roundRect，round
@9.进度池
如果只需要实用最基础的，我们只需要配置一个value值就可以了，当然，我们可以配置边框的弧度（borderRadius），间距（borderGap）等等
以下是详细可配置项：
@10.飞线图及飞线增强图
我理解的，大概效果就是你自己通过坐标设置N个飞线点（point）之后，通过lines在任意两点之间设置飞线，初始点是source，终点是target，完成类似的效果图：
Tips：上面不是真的地图，只是我设置的背景图。
一张图中，我们可以通过组件提供的dev模式，来帮助我们快速确定我们所需的飞线点的具体位置：
我们会在F12控制台中，打印出所需飞线点的位置信息，即Point的coordinate
飞线点写法是这样的，point为飞线点数组集合：
飞线是这样的：
常用的API有：
Dev：寻找具体点坐标
Text：show是否显示点名称，color颜色，fontsize字体等
@11.锥形柱图
是一种特殊样式的柱状图，用法也类似，详情看柱状图，不多做介绍，样式如下：
@12. 数字翻牌器
一种数码牌类似的，可以用来大屏展示，效果如右图：
主要用到的需要设置的config属性有：
Number：显示的数字，类型是数组，
Content：是显示的内容模板，形如：{nt}个，其中{nt}是被number元素替换的，按顺序一一对应。
toFixed：是用来显示小数位数，形如XXX.XX这种，类型为number，数值为小数位数。
@13.轮播表
是一个表格样式的轮播表：与下图类似：
同时对超过行，有滚动效果，适合用于列表数据的展示，其中config绑定数据如下：
主要用到的是header和data数据，以及样式里面的表行数和表的背景颜色，这些数据都是写在config里面，如下图：
翻牌器同时内置支持click事件和mouseover事件，当我们点击某一行时候，会在游览器控制台中打印点击相关的事件属性，把鼠标停留在某一行上面时，也会触发mouseover事件，打印对应的属性。
@14.排名轮播表
和轮播表类似，整体config设置也类似，只是显示带上了排名。
Data数据有所区别，是以键值对数组的方式进行存储，属性是下图：
整体写法大概是类似这种：
结尾
这篇主要写了我在使用datav中，觉得比较常用的组件，和每个组件大概的使用方法，也有一些原文档没有写清楚实际开发中遇到的坑，数据基本都是和config绑定，大部分config属性和常用的方法我都进行了展示。datav里面同时也集成了作者封装的简易charts组件，具体的使用我也在@5图标中有写。如果有实在不清楚的，可以去官方文档看看有没有自己想要的对应解决方案。地址见下：