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公有属性

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