v-charts的使用

比眉伴天荒 2023-06-17 15:56 5阅读 0赞

### v-charts ###

*   *  v-charts简介
     *  v-charts安装
     *  v-charts引入
     *  v-charts使用
     *  v-charts公有属性

## v-charts简介 ##

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 V-Charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

## v-charts安装 ##

npm i v-charts -S

## v-charts引入 ##

全部引入

//main.js
    import VCharts from 'v-charts'
    Vue.use(VCharts)

按需引入  
V-Charts的每种图表组件，都单独打包到lib文件夹下，以下为案例

*  lib/
    
     *  line.js -------------- 折线图
     *  bar.js --------------- 条形图
     *  histogram.js --------- 柱状图
     *  pie.js --------------- 饼图
     *  ring.js -------------- 环图
     *  funnel.js ------------ 漏斗图
     *  waterfall.js --------- 瀑布图
     *  radar.js ------------- 雷达图
     *  map.js --------------- 地图
     *  bmap.js -------------- 百度地图

使用时，可以直接将单个图表引入到项目中,对应上面图表看自己的项目需求

import VeHistogram from 'v-charts/lib/histogram.common'
    //或者
    import VeLine from 'v-charts/lib/line'

## v-charts使用 ##

<ve-histogram :data="chartData" :settings="chartSettings"/>

## v-charts公有属性 ##

<table> 
 <thead> 
  <tr> 
   <th>配置项</th> 
   <th>简介</th> 
   <th>类型</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>图表数据</td> 
   <td>Object</td> 
   <td>columns 代表指标和维度名称， rows 为数据内容</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>图表宽度</td> 
   <td>String</td> 
   <td>默认 auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>图表高度</td> 
   <td>String</td> 
   <td>默认 400px</td> 
  </tr> 
  <tr> 
   <td>settings</td> 
   <td>图表配置项</td> 
   <td>Object</td> 
   <td>图表的私有属性</td> 
  </tr> 
  <tr> 
   <td>colors</td> 
   <td>颜色列表</td> 
   <td>Array</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>tooltip-visible</td> 
   <td>是否显示提示框</td> 
   <td>Boolean</td> 
   <td>默认为 true</td> 
  </tr> 
  <tr> 
   <td>legend-visible</td> 
   <td>是否显示图例</td> 
   <td>Boolean</td> 
   <td>默认为 true</td> 
  </tr> 
  <tr> 
   <td>legend-position</td> 
   <td>图例显示位置</td> 
   <td>String</td> 
   <td>可选’left’, ‘top’, ‘right’, ‘bottom’</td> 
  </tr> 
  <tr> 
   <td>grid</td> 
   <td>网格配置</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>events</td> 
   <td>为图表绑定事件</td> 
   <td>Object</td> 
   <td>包含事件名-事件处理函数的对象</td> 
  </tr> 
  <tr> 
   <td>before-config</td> 
   <td>对数据提前进行额外的处理</td> 
   <td>Function</td> 
   <td>在数据转化为配置项开始前触发， 参数为 data，返回值为表格数据</td> 
  </tr> 
  <tr> 
   <td>after-config</td> 
   <td>生成echarts配置进行额外的处理</td> 
   <td>Function</td> 
   <td>在数据转化为配置项结束后触发，参数为 options，返回值为 echarts 配置</td> 
  </tr> 
  <tr> 
   <td>after-set-option</td> 
   <td>生成图后获取echarts实例</td> 
   <td>Function</td> 
   <td>参数为echarts实例</td> 
  </tr> 
  <tr> 
   <td>after-set-option-once</td> 
   <td>图后获取echarts只执行一次</td> 
   <td>Function</td> 
   <td>参数为echarts实例</td> 
  </tr> 
  <tr> 
   <td>mark-line</td> 
   <td>图表标线</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>mark-area</td> 
   <td>图表标志区域</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>visual-map</td> 
   <td>视觉映射组件</td> 
   <td>Array, Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>mark-point</td> 
   <td>图表标点</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>data-zoom</td> 
   <td>区域缩放组件</td> 
   <td>Array, Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>toolbox</td> 
   <td>工具箱</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>图表标题</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>init-optionsinit</td> 
   <td>附加参数</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>自定义主题</td> 
   <td>Object</td> 
   <td>内容为自定义主题参数</td> 
  </tr> 
  <tr> 
   <td>theme-name</td> 
   <td>自定义主题名称</td> 
   <td>String</td> 
   <td>内容为全局注册的自定义主题名称</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>加载状态</td> 
   <td>Boolean</td> 
   <td>默认为false</td> 
  </tr> 
  <tr> 
   <td>data-empty</td> 
   <td>暂无数据状态</td> 
   <td>Boolean</td> 
   <td>默认为false</td> 
  </tr> 
  <tr> 
   <td>judge-width</td> 
   <td>是否处理生成图表时的宽度问题</td> 
   <td>Boolean</td> 
   <td>默认为 true</td> 
  </tr> 
  <tr> 
   <td>width-change-delay</td> 
   <td>容器宽度变化的延迟</td> 
   <td>Number</td> 
   <td>默认为300</td> 
  </tr> 
  <tr> 
   <td>extend</td> 
   <td>设置echart的详细属性</td> 
   <td>Object</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>