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