前述
早在17年的时候就想做这个插件，当时也调查一些技术点，但由于工作比较忙和个人能力有限，一直拖到现在，19年初已经开始做了，虽然是一个小小的插件，改了又改，其间推翻重做了好几次，现在终于出了一个版本。好咧，讲故事完毕，进入正题。
象形可视化
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息，而象形可视化是更加生动形象的传达数据信息
下图是关于考研的数据统计信息中使用到了象形可视化
象形可视化demo.jpg
vue-pictorial-chart 插件介绍
vue-pictorial-chart 是一款基于vue的象形可视化插件，目前发布了1.0.0版本，是基于svg开发的插件，该插件可以充分展示出部分占总体的关系，并且生动形象的展示内容的图形
例子
vue-pictorial-chart-demo.png
vue-pictorial-chart-demo1.png
使用
- 安装
npm install vue-pictorial-chart
- 代码示例
<template>
<pictorial-chart :icon="carIconSvg" per="8.5" size="60" total="14"></pictorial-chart>
</template>
<script>
import carIconSvg from "../assets/car.svg";
import PictorialChart from "vue-pictorial-chart";
export default {
components: { PictorialChart },
data () {
return {
carIconSvg
}
}
}
</script>
- 配置项
| 字段 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| icon | SVG图标(必须) | file | |
| total | 总数量 | Number | 10 |
| per | 占比数(可以小数) | Number | 0 |
| size | 大小 | Number | 50 |
| activeColor | 侧重颜色,设置则以设置颜色，不设置以svg原始色 | String |
** 注意: 目前支持大部分svg图标
代码地址
如果遇到bug或者有更好的建议，请在github上反馈
githup地址
