遵循使用 vue-google-charts 插件的说明:https : //www.npmjs.com/package/vue-google-charts
想要创建组织结构图:https : //developers.google.com/chart/interactive/docs/gallery/orgchart
想我必须使用 onChartReady() 但不知道如何使用组织结构图。
<template >
<div class="container">
<GChart
type="OrgChart"
:data="chartData"
@ready="onChartReady"
/>
</div>
</template>
<script>
import { GChart } from 'vue-google-charts'
export default {
components: {
GChart
},
data () {
return {
// Array will be automatically processed with visualization.arrayToDataTable function
chartData: [
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
],
options: …Run Code Online (Sandbox Code Playgroud)