饼状图插件v-pie
效果
v-pie.png
特性
- 多种样式
- 独立的渲染库
- 独立的动画库
- 轻量级源码，简洁易懂，可根据需求自定义改造
参考资料
- 基于charjs库代码裁剪，只保留了pie相关代码
- 渲染库为Crender
- 动画库为transition
详细资料请参考
http://charts.jiaminghi.com/
http://crender.jiaminghi.com/
http://transition.jiaminghi.com/
安装
npm install @oldeng/v-pie
使用
详情参考demo源码
//导入饼状图组件
import { VPie } from "../../dist/v-pie.umd.js";
//导入样式
import "../../dist/v-pie.css";
//导入配置文件
import Options from "./options.1";
export default {
name: "Experiment",
methods: {
//刷新
refresh() {
Options[0].series[0].data = Options[1].series[0].data = Options[2].series[0].data = [
{
name: "汉字A",
value: Math.floor(Math.random() * 100),
},
{
name: "汉字B",
value: Math.floor(Math.random() * 100),
},
{
name: "汉字C",
value: Math.floor(Math.random() * 100),
},
{
name: "汉字D",
value: Math.floor(Math.random() * 100),
},
];
this.pie1.setOption(Options[0]);
this.pie2.setOption(Options[1]);
this.pie3.setOption(Options[2]);
},
},
mounted() {
this.$nextTick(() => {
//样式一
this.pie1 = this.$refs["pie1"];
this.pie1.setOption(Options[0]);
//样式二
this.pie2 = this.$refs["pie2"];
this.pie2.setOption(Options[1]);
//样式三
this.pie3 = this.$refs["pie3"];
this.pie3.setOption(Options[2]);
});
},
components: {
VPie,
},
};
Github
https://github.com/oldeng/v-pie/tree/Crender
Npm
https://www.npmjs.com/package/@oldeng/v-pie
源码分析
持续更行中👀👀👀👀👀👀👀
