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
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}(百分比)
Dependencies
Dependencies
@vue/cli-plugin-babel: ^3.10.0@vue/cli-plugin-eslint: ^3.10.0@vue/cli-service: ^3.10.0@vue/eslint-config-prettier: ^5.0.0@vue/eslint-config-standard: ^4.0.0babel-eslint: ^10.0.1eslint: ^5.16.0eslint-plugin-prettier: ^3.1.0eslint-plugin-vue: ^5.0.0husky: ^3.0.5lint-staged: ^9.2.5prettier: ^1.18.2vue-template-compiler: ^2.6.10