tiny-vue/examples/sites/demos/pc/app/chart/sunburst/base.vue

<template>
  <div>
    <tiny-sunburst :extend="extend"></tiny-sunburst>
  </div>
</template>

<script lang="jsx">
import { ChartSunburst } from '@opentiny/vue'

let canvasColor = ['#FF6161', '#FF8C75', '#FFB499']
let svgColor = ['#53C299', '#83E0A8', '#B7F6C0']
let evenColor = '#eee'

let data = [
  {
    name: '展示平台',
    children: [
      {
        name: '手机端',
        children: [
          {
            name: '安卓',
            children: [
              {
                name: 'SVG ↑↑↑',
                value: 1,
                itemStyle: {
                  color: svgColor[0]
                }
              }
            ]
          },
          {
            name: 'iOS',
            children: [
              {
                name: 'SVG ↑',
                value: 1,
                itemStyle: {
                  color: svgColor[2]
                }
              }
            ]
          }
        ]
      },
      {
        name: '电脑端',
        children: [
          {
            name: 'Mac',
            children: [
              {
                name: 'Chrome',
                children: [
                  {
                    name: 'SVG ↑',
                    value: 1,
                    itemStyle: {
                      color: svgColor[2]
                    }
                  }
                ]
              },
              {
                name: 'Safari',
                children: [
                  {
                    name: '-',
                    value: 1,
                    itemStyle: {
                      color: evenColor
                    }
                  }
                ]
              },
              {
                name: 'Firefox',
                children: [
                  {
                    name: '-',
                    value: 1,
                    itemStyle: {
                      color: evenColor
                    }
                  }
                ]
              }
            ]
          },
          {
            name: 'Windows',
            children: [
              {
                name: 'IE',
                children: [
                  {
                    name: 'Canvas ↑↑',
                    value: 1,
                    itemStyle: {
                      color: canvasColor[1]
                    }
                  }
                ]
              },
              {
                name: 'Chrome',
                children: [
                  {
                    name: '-',
                    value: 1,
                    itemStyle: {
                      color: evenColor
                    }
                  }
                ]
              },
              {
                name: 'Firefox',
                children: [
                  {
                    name: 'SVG ↑',
                    value: 1,
                    itemStyle: {
                      color: svgColor[2]
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '图表类型',
    children: [
      {
        name: '折线图',
        children: [
          {
            name: 'SVG ↑↑',
            value: 1,
            itemStyle: {
              color: svgColor[1]
            }
          }
        ]
      },
      {
        name: '柱状图',
        children: [
          {
            name: 'Canvas ↑↑',
            value: 1,
            itemStyle: {
              color: canvasColor[1]
            }
          }
        ]
      },
      {
        name: '饼图',
        children: [
          {
            name: '-',
            value: 1,
            itemStyle: {
              color: evenColor
            }
          }
        ]
      }
    ]
  },
  {
    name: '数据量',
    children: [
      {
        name: '< 1000',
        children: [
          {
            name: '-',
            value: 1,
            itemStyle: {
              color: evenColor
            }
          }
        ]
      },
      {
        name: '>= 1000',
        children: [
          {
            name: 'Canvas ↑',
            value: 1,
            itemStyle: {
              color: canvasColor[2]
            }
          }
        ]
      }
    ]
  },
  {
    name: '图表个数',
    children: [
      {
        name: '< 10',
        children: [
          {
            name: '-',
            value: 1,
            itemStyle: {
              color: evenColor
            }
          }
        ]
      },
      {
        name: '>= 10',
        children: [
          {
            name: 'SVG ↑↑↑',
            value: 1,
            itemStyle: {
              color: svgColor[0]
            }
          }
        ]
      }
    ]
  },
  {
    name: '特殊\n渲染\n需求',
    children: [
      {
        name: '仅 Canvas\n支持',
        value: 1,
        itemStyle: {
          color: canvasColor[0]
        }
      }
    ]
  }
]

export default {
  components: {
    TinySunburst: ChartSunburst
  },
  data() {
    return {
      extend: {
        series: {
          radius: ['10%', '100%'],
          center: ['50%', '50%'],
          startAngle: 0,
          sort: null,
          highlightPolicy: 'ancestor',
          data,
          label: {
            rotate: 0,
            textBorderColor: '#444',
            textBorderWidth: 2,
            fontSize: 14
          },
          levels: [
            {},
            {
              itemStyle: {
                color: '#999'
              }
            },
            {
              itemStyle: {
                color: '#bbb'
              }
            },
            {
              itemStyle: {
                color: '#ccc'
              }
            }
          ],
          itemStyle: {
            color: '#ddd',
            borderWidth: 2
          }
        }
      }
    }
  }
}
</script>