forked from opentiny/tiny-vue
125 lines
2.0 KiB
Vue
125 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<tiny-tree-chart :data="chartData" :settings="chartSettings"></tiny-tree-chart>
|
|
<tiny-tree-chart
|
|
:data="chartData"
|
|
:extend="chartExtend"
|
|
:tooltip-formatter="tooltipFormatter"
|
|
:settings="chartSettings"
|
|
></tiny-tree-chart>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { ChartTree } from '@opentiny/vue'
|
|
|
|
const treeData = {
|
|
name: 'f',
|
|
value: 1,
|
|
link: '',
|
|
children: [
|
|
{
|
|
name: 'a',
|
|
value: 1,
|
|
link: '',
|
|
children: [
|
|
{
|
|
name: 'a-a',
|
|
link: '',
|
|
value: 2
|
|
},
|
|
{
|
|
name: 'a-b',
|
|
link: '',
|
|
value: 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'b',
|
|
value: 1,
|
|
link: '',
|
|
children: [
|
|
{
|
|
name: 'b-a',
|
|
link: '',
|
|
value: 2
|
|
},
|
|
{
|
|
name: 'b-b',
|
|
link: '',
|
|
value: 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'c',
|
|
value: 3,
|
|
link: '',
|
|
children: [
|
|
{
|
|
name: 'c-a',
|
|
link: '',
|
|
value: 4
|
|
},
|
|
{
|
|
name: 'c-b',
|
|
link: '',
|
|
value: 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'd',
|
|
value: 3,
|
|
link: '',
|
|
children: [
|
|
{
|
|
name: 'd-a',
|
|
link: '',
|
|
value: 4
|
|
},
|
|
{
|
|
name: 'd-b',
|
|
link: '',
|
|
value: 2
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
TinyTreeChart: ChartTree
|
|
},
|
|
data() {
|
|
return {
|
|
// 自定义提示框内容
|
|
chartData: {
|
|
columns: ['name', 'value'],
|
|
rows: [
|
|
{
|
|
name: 'tree1',
|
|
value: [treeData]
|
|
}
|
|
]
|
|
},
|
|
chartSettings: {},
|
|
chartExtend: {
|
|
tooltip: {
|
|
alwaysShowContent: true
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
tooltipFormatter(v) {
|
|
return [`${v.seriesName}: ${v.data.value}`, `<a target="_blank" href="${v.data.link}">${v.data.link}</a>`].join(
|
|
'<br>'
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|