唯雪博客

echarts应用——旭日图

唯雪博客

    echarts 目前已经出到了第四版,较第三版又新增了很多新功能,应用更加广泛,对于数据可视化应用真的是一大利器。

    平时用的比较多的是柱图、折线图、饼图等基本用途。需求变态一点的也就是在此基础上做一个扩展。最近收到一个需求,是要将用柱图展示树状的数据。研究过echarts以及市面应用较广泛的可视化工具,不管是采用层叠加还是自定义扩展时间成本都太大。最后敲定使用旭日图。

    树状结构的图,echarts2就已经有不少了,但是可视效果和用户体验都不怎么理想,好在ecahrts4大大提升了旭日图的应用,进行了尝试体验非一般的舒爽。

    和其他echarts的图一样,引入echarts,初始化dom结构,设置option基本就是这个几个大步骤。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
    <div id="sunburst" style="width:500px;height: 500px">
      
    </div>
</body>
  <script src="js/echarts.sunburst.min.js"></script>
  <script>
    var data = [{
            name: '业务问题错误',
            children: [{
                name: 'Uncle Leo',
                value: 6,
               
            }, {
                name: 'Uncle Leo',
                value: 8,
               
            },{
                name: 'Uncle Leo',
                value: 2,
               
            },{
                name: 'Father',
                value: 10,
                
            }]
        }, {
            name: '答案不可应答',
            children: [{
                name: 'Uncle Leo',
                value: 7,
               
            }]
        }, {
            name: 'Grandpa',
            children: [{
                name: 'Uncle Leo',
                value: 15,
               
            }, {
                name: 'Father',
                value: 10,
                
            }]
        }, {
            name: 'Nancy',
            children: [{
                name: 'Uncle Nike',
                value: 5
            },{
                name: 'Uncle Nike',
                value: 4
            }]
        }];

option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: {
        type: 'sunburst',
        // highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '90%'],
        label: {
            rotate: 'radial',
            formatter: '{b}: {@name}'
        }
    }
};
    var myChart = echarts.init(document.getElementById('sunburst'));
    myChart.setOption(option);
  </script>
</html>

通过上面的配置一个最简单的旭日图就完成了

唯雪博客

    默认可以实现数据下钻功能,也就是说,当用户点击了某个扇形块之后,将会以该节点作为根结点显示,并且在中间出现一个返回上层节点的圆。如果不希望有数据下钻功能,可以通过将 series-sunburst.nodeClick 设置为 false 实现。

    需要注意的是,旭日图默认是不能像饼图使用{d}获取到数据的占比的。

    好在可以通过formatter进行设置。

    标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

    回调函数格式:

(params: Object|Array) => string

    参数 params 是 formatter 需要的单个数据集。格式如下:

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,}

将上述例子的params 打印出来

    唯雪博客

如截图,信息非常全面,尤其是data属性下的值,只要是配置在data中的属性都被返回了。所以百分比我们也可以算好以后放置在data中,然后直接取值展示就好。

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论