旭日图

基本用法

暂无数据

<template>
    <care-sunburst 
        ref="bar"
        :data="chartData"
        :settings="chartSettings"
        :log="true">
    </care-sunburst>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['名称', '数量'],
            links: [
                { name: '水果', children: ['梨','苹果','草莓']},
                { name: '苹果', children: ['红富士','黄元帅']},
                { name: '蔬菜', children: ['芹菜','菠菜']},
                { name: '其他', children: []},
                { name: '梨', children: ['南国梨','水晶梨']},
            ]
        }
        return {
            chartData: [
                { '名称': '水果', '数量': 10 },
                { '名称': '梨', '数量': 3},
                { '名称': '南国梨', '数量': 1},
                { '名称': '水晶梨', '数量': 2},
                { '名称': '苹果', '数量': 5 },
                { '名称': '红富士', '数量': 2},
                { '名称': '黄元帅', '数量': 3},
                { '名称': '草莓', '数量': 2},
                { '名称': '蔬菜', '数量': 6},
                { '名称': '芹菜', '数量': 2},
                { '名称': '菠菜', '数量': 4},
                { '名称': '其他', '数量': 3},
            ]
        }
    }
}
</script>

显示代码 复制代码 复制代码