1. wong-vue-charts

wong-vue-charts

v-charts

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

formatter的使用方法

当trigger为’item’时只会显示该点的数据,为’axis’时显示该列下所有坐标轴所对应的数据,重要的就是这个formatter属性,这个属性是具体用来操作显示的数据格式的,对于官方文档给的这个格式我最初是有点懵逼的,后来我再认真的看了一下关于这个属性的说明才发现这种写法是真的好用,模板变量有 {a}, {b},{c},{d},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)