代码拉取完成，页面将自动刷新
Chart components based on AntV G2
p-charts支持Vue3.x版本，查看分支vue3
npm install -S p-charts
# or
yarn add p-charts
// main.js
import PCharts from 'p-charts'
Vue.use(PCharts)
<template>
<p-pie
:data="PieJson"
:options="options"
ref="pieRef"
@pie-title-click="handleTitleClick"
@pie-label-click="handleLabelClick"
/>
</template>
<script>
import PieJson from './data/pie1.json'
export default {
data() {
return {
PieJson,
options: {
fieldMap: {
time: 'year',
name: 'budgetSubject',
// 统计指标，可以更换
value: 'budgetNum'
},
title: `总收入和总支出占比情况-预算数（单位：万元）`,
colorList: ['#1890ff', '#37c661']
}
}
},
methods: {
updateData() {
this.$refs.pieRef.initData()
},
handleTitleClick() {
console.log('title-click')
},
handleLabelClick(data) {
console.log('label-click', data)
}
}
}
</script>
# install dependencies
npm install
# or
yarn
# serve with hot reload at localhost:8080
npm run dev
# or
yarn dev
# build for production with minification
npm run build
# or
yarn build
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。