ECharts-旭日图（Sunburst）带时间轴

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012796085/article/details/80949161

常见结构

var dom = document.getElementById("container");
//定义echarts对象
var myChart = echarts.init(dom);
//构建图表的参数
 var option = {
    //定义标题
    title: {
        text: '揽件汇总',
        textStyle: {
            fontSize: 14,
            align: 'center'
        }
    },
    //鼠标悬停显示，旭日图的{d}百分比 显示不出来
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    //参数列表
    series: {
        type: 'sunburst',
        highlightPolicy: 'ancestor',
        //数据源
        data: 数据源,
        radius: [0, '95%'],
        //排序，null表示依据后台传的数据排序
        sort: null,
        levels: [{}, {
            //内环
            r0: '15%',
            r: '40%',
            itemStyle: {
                borderWidth: 2
            },
            label: {
                rotate: 'tangential'
            }
        }, {
            //中环
            r0: '40%',
            r: '69%',
            label: {
                align: 'right'
            }
        }, {
            //外环
            r0: '69%',
            r: '77%',
            label: {
                position: 'outside',
                padding: 3,
                silent: false,
                color:'black'
            },
            itemStyle: {
                borderWidth: 3
            }
        }]
    }
 }

 myChart.setOption(iption);

---

添加时间轴和加载动画

echarts是一次把所有数据都获取到之后才构建图表的，时间轴的每一个节点都是一个旭日图，以前的option{}变为options[{},{}]。\
这时获取的数据就是单一旭日图的好n倍，加载时间必然会加长，需要添加等待动画

注意点：

• 数据结构，与单一旭日图相比，除了需要传每个时间点的数据，还是要传每个时间节点，如果要查询的时间点是固定不变的可不传

    public JSONObject getData(Map<String, Object> map) throws ParseException {
        JSONObject totinfo = new JSONObject();
        //7天数据集合
        List<Object> resAll = new ArrayList<>();
        //7天时间节点
        List<String> daylist = new ArrayList<>();
        //查询第一天时保存最大日期和日期列表
         String  maxDate = effect_echartsDao.getmaxDate();
        Calendar c = Calendar.getInstance();
        Date date = new SimpleDateFormat("yyyy-MM-dd").parse(maxDate);
        c.setTime(date);
        int i=0;
        do {
            daylist.add(maxDate);
            //获取某一天的数据
            List<Echarts_torusVO> areaList = getOneDayinfo(maxDate);
            resAll.add(areaList);
            i++;
            //天数往前推一天
            c.add(Calendar.DATE, -1);
            maxDate = new SimpleDateFormat("yyyy-MM-dd").format(c.getTime());
        }while (i<7);
        totinfo.put("rows",resAll);
        totinfo.put("daylist",daylist);
        return totinfo;
    }

• myChart.showLoading();是echarts自带的加载动画，使用前提是ajax使用异步加载，否则页面整个锁住（即便等待gif显示都会卡成静态图）。\
  然而使用异步加载会导致后面构建图表时数据源和时间节点参数还没赋值。\
  所以我使用的定时函数，每0.1秒执行一次，判断ajax执行完没有，如果执行完了，那么我的两个变量不为null,这时就可以开始绘制图表了，否则就一直等待

• 其他一些小问题

baseOption:{
            timeline: {
                axisType:'category',
                /* autoPlay: true,
                 playInterval:3000,*/
                 //时间节点必须是字符数组，后台的List可以使用data.toString().split(",");转化
                data: daylist
            },
            title: {
                subtext: '大区省分拨规划达成票数统计'
            }
        },
 options:[
            {
                title: {
                    //标题跟随时间切换动态显示
                    text: daylist[0]+'揽件汇总',
                    textStyle: {
                        fontSize: 14,
                        align: 'center'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c}"
                },
                series: {
                    type: 'sunburst',
                    highlightPolicy: 'ancestor',
                    data: alldata[0],
                    。。。
                }
            },
            {...},
            {...},
            {...},
            {...}
        ]

优化代码（官方方案）

补上前面的坑，后来有空看了一下官方文档，官网提供的请求数据方式ajax结构简单，又不需要考虑同步异步的问题，简直完美