餅狀圖插件v-pie
效果
v-pie.png
特性
- 多種樣式
- 獨立的渲染庫
- 獨立的動畫庫
- 輕量級源碼，簡潔易懂缀踪，可根據(jù)需求自定義改造
參考資料
- 基于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
源碼分析
持續(xù)更行中??????????????
