数据可视化工具 v-charts

介绍

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

npm安装

npm i v-charts echarts -S

完整引入

1. 配置main.js文件

import VCharts from ‘v-charts’

Vue.use(VCharts)

按需引入

v-charts的每种图表组件，都已经单独打包到lib文件夹下了

|- lib/
|- line.common.js -------------- 折线图
|- bar.common.js --------------- 条形图
|- histogram.common.js --------- 柱状图
|- pie.common.js --------------- 饼图
|- ring.common.js -------------- 环图
|- funnel.common.js ------------ 漏斗图
|- waterfall.common.js --------- 瀑布图
|- radar.common.js ------------- 雷达图
|- map.common.js --------------- 地图
|- sankey.common.js ------------ 桑基图
|- heatmap.common.js ----------- 热力图
|- scatter.common.js ----------- 散点图
|- candle.common.js ------------ k线图
|- gauge.common.js ------------- 仪表盘
|- tree.common.js -------------- 树图
|- bmap.common.js -------------- 百度地图
|- amap.common.js -------------- 高德地图
使用时，可以直接将单个图表引入到项目中

import VeLine from ‘v-charts/lib/line.common’

Vue.component(VeLine.name, VeLine)

基本属性

分隔符

分隔符

分隔符

echarts options 属性

柱状图：配置篇

1. axisSite 可以设置 left 和 right，例如示例所示 axisSite: { right: [‘占比’] }
   即将占比的数据置于右轴上。
2. stack 用于将两数据堆叠起来，例如实例中所示stack: { ‘销售额’: [‘销售额-1季度’, ‘销售额-2季度’]
   } 即将’销售额-1季度’, '销售额-2季度’相应的数据堆叠在一起。
3. dataOrder 用于设置数据的排序方式，用于更加清晰的展示数据的升降。例如： { label: ‘余额’, order:
   'asc } 表示数据按照余额指标升序展示，降序为desc。
4. min和max的值可以直接设置为数字，例如：[100, 300]；也可以设置为[‘dataMin’, ‘dataMin’],
   [‘dataMax’, ‘dataMax’]，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。
5. 有时我们需要将折线图与柱状图展示在同一个图上，利用showLine属性可以设置需要展示为折线图的指标，其他的指标则使用柱状图展示。
6. 为了优化连续的数值型横轴显示多指标的时候样式，在此情况下默认设置opacity为0.5。

地图配置篇：