前述

早在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

使用

1. 安装

npm install vue-pictorial-chart

2. 代码示例

<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>

3. 配置项

** 注意: 目前支持大部分svg图标

代码地址

如果遇到bug或者有更好的建议，请在github上反馈
githup地址