echarts餅狀圖輪播效果

學會思考，學會總結。

部分程式碼來自echarts官方：echarts官方網址

ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的數據視覺化圖表。

echarts爲我們前端開發人員提供了一個吧數據變成圖形，更加直觀地展現出來。
今天我在用echarts做出餅狀圖的輪播效果，記錄當下。

下面 下麪是echarts餅狀圖的程式碼：

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接存取', '郵件行銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
    },
    series: [
        {
            name: '存取來源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接存取'},
                {value: 310, name: '郵件行銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視訊廣告'},
                {value: 1548, name: '搜尋引擎'}
            ]
        }
    ]
};

通過查閱echarts官網的api可以知道dispatchAction方法可以讓當前選中的部分高亮顯示，下面 下麪就是api程式碼片段：

dispatchAction({
    type: 'downplay',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 可選，數據的 index
    dataIndex?: number,
    // 可選，數據的 名稱
    name?: string
})

所以我們只需要寫一個定時器，在其中回圈每個部分，不斷地讓他們高亮顯示和高亮消失就可以做出輪播效果：

setInterval(function () {
	var dataLen = options.series[0].data.length;
    myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: curIndex});
    curIndex = (curIndex + 1) % dataLen
    myChart.dispatchAction({
    	type: 'highlight',seriesIndex: 0,dataIndex: curIndex
    });
}, 1000);

以上就可以實現echarts餅狀圖的輪播效果了。