常見結構

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結構簡單，又不需要考慮同步非同步的問題，簡直完美