tree.md

树图

示例

<script v-pre type="text/x-template" id="simple-tree"> <script> const treeData = { name: 'f', value: 1, link: 'https://ele.me', children: [ { name: 'a', value: 1, link: 'https://ele.me', children: [ { name: 'a-a', link: 'https://ele.me', value: 2 }, { name: 'a-b', link: 'https://ele.me', value: 2 } ] }, { name: 'b', value: 1, link: 'https://ele.me', children: [ { name: 'b-a', link: 'https://ele.me', value: 2 }, { name: 'b-b', link: 'https://ele.me', value: 2 } ] }, { name: 'c', value: 3, link: 'https://ele.me', children: [ { name: 'c-a', link: 'https://ele.me', value: 4 }, { name: 'c-b', link: 'https://ele.me', value: 2 } ] }, { name: 'd', value: 3, link: 'https://ele.me', children: [ { name: 'd-a', link: 'https://ele.me', value: 4 }, { name: 'd-b', link: 'https://ele.me', value: 2 } ] } ] } export default { data () { return { chartData: { columns: ['name', 'value'], rows: [ { name: 'tree1', value: [treeData] } ] } } } } </script> </script>

多树图

<script v-pre type="text/x-template" id="more-tree"> <script> const treeData = { name: 'f', value: 1, link: 'https://ele.me', children: [ { name: 'a', value: 1, link: 'https://ele.me', children: [ { name: 'a-a', link: 'https://ele.me', value: 2 }, { name: 'a-b', link: 'https://ele.me', value: 2 } ] }, { name: 'b', value: 1, link: 'https://ele.me', children: [ { name: 'b-a', link: 'https://ele.me', value: 2 }, { name: 'b-b', link: 'https://ele.me', value: 2 } ] }, { name: 'c', value: 3, link: 'https://ele.me', children: [ { name: 'c-a', link: 'https://ele.me', value: 4 }, { name: 'c-b', link: 'https://ele.me', value: 2 } ] }, { name: 'd', value: 3, link: 'https://ele.me', children: [ { name: 'd-a', link: 'https://ele.me', value: 4 }, { name: 'd-b', link: 'https://ele.me', value: 2 } ] } ] } export default { data () { this.chartSettings = { seriesMap: { tree1: { top: '5%', left: '7%', bottom: '2%', right: '60%' }, tree2: { top: '20%', left: '60%', bottom: '22%', right: '18%' } } } return { chartData: { columns: ['name', 'value'], rows: [ { name: 'tree1', value: [treeData] }, { name: 'tree2', value: [treeData] } ] } } } } </script> </script>

径向树图

<script v-pre type="text/x-template" id="radial-tree"> <script> const treeData = { name: 'f', value: 1, link: 'https://ele.me', children: [ { name: 'a', value: 1, link: 'https://ele.me', children: [ { name: 'a-a', link: 'https://ele.me', value: 2 }, { name: 'a-b', link: 'https://ele.me', value: 2 } ] }, { name: 'b', value: 1, link: 'https://ele.me', children: [ { name: 'b-a', link: 'https://ele.me', value: 2 }, { name: 'b-b', link: 'https://ele.me', value: 2 } ] }, { name: 'c', value: 3, link: 'https://ele.me', children: [ { name: 'c-a', link: 'https://ele.me', value: 4 }, { name: 'c-b', link: 'https://ele.me', value: 2 } ] }, { name: 'd', value: 3, link: 'https://ele.me', children: [ { name: 'd-a', link: 'https://ele.me', value: 4 }, { name: 'd-b', link: 'https://ele.me', value: 2 } ] } ] } export default { data () { this.chartSettings = { seriesMap: { tree1: { layout: 'radial' } } } return { chartData: { columns: ['name', 'value'], rows: [ { name: 'tree1', value: [treeData] } ] } } } } </script> </script>

纵向树图

<script v-pre type="text/x-template" id="vertical-tree"> <script> const treeData = { name: 'f', value: 1, link: 'https://ele.me', children: [ { name: 'a', value: 1, link: 'https://ele.me', children: [ { name: 'a-a', link: 'https://ele.me', value: 2 }, { name: 'a-b', link: 'https://ele.me', value: 2 } ] }, { name: 'b', value: 1, link: 'https://ele.me', children: [ { name: 'b-a', link: 'https://ele.me', value: 2 }, { name: 'b-b', link: 'https://ele.me', value: 2 } ] }, { name: 'c', value: 3, link: 'https://ele.me', children: [ { name: 'c-a', link: 'https://ele.me', value: 4 }, { name: 'c-b', link: 'https://ele.me', value: 2 } ] }, { name: 'd', value: 3, link: 'https://ele.me', children: [ { name: 'd-a', link: 'https://ele.me', value: 4 }, { name: 'd-b', link: 'https://ele.me', value: 2 } ] } ] } export default { data () { this.chartSettings = { seriesMap: { tree1: { orient: 'vertical' } } } return { chartData: { columns: ['name', 'value'], rows: [ { name: 'tree1', value: [treeData] } ] } } } } </script> </script>

自定义提示框内容

<script v-pre type="text/x-template" id="custom-tooltip-tree"> <script> const treeData = { name: 'f', value: 1, link: 'https://ele.me', children: [ { name: 'a', value: 1, link: 'https://ele.me', children: [ { name: 'a-a', link: 'https://ele.me', value: 2 }, { name: 'a-b', link: 'https://ele.me', value: 2 } ] }, { name: 'b', value: 1, link: 'https://ele.me', children: [ { name: 'b-a', link: 'https://ele.me', value: 2 }, { name: 'b-b', link: 'https://ele.me', value: 2 } ] }, { name: 'c', value: 3, link: 'https://ele.me', children: [ { name: 'c-a', link: 'https://ele.me', value: 4 }, { name: 'c-b', link: 'https://ele.me', value: 2 } ] }, { name: 'd', value: 3, link: 'https://ele.me', children: [ { name: 'd-a', link: 'https://ele.me', value: 4 }, { name: 'd-b', link: 'https://ele.me', value: 2 } ] } ] } export default { data () { this.chartSettings = {} this.chartExtend = { tooltip: { alwaysShowContent: true } } return { chartData: { columns: ['name', 'value'], rows: [ { name: 'tree1', value: [treeData] } ] } } }, methods: { tooltipFormatter (v) { return [ `${v.seriesName}: ${v.data.value}`, `${v.data.link}` ].join('
') } } } </script> </script>

settings 配置项

配置项	简介	类型	备注
dimension	维度	string	默认columns第一项为维度
metrics	指标	string	默认columns第二项为指标
seriesMap	附加到 series 中的设置	object	-

备注1： 通过 seriesMap，可以为每一个树设置样式，具体样式的配置可以参考文档