Echarts3.0中利用dataset進行數據管理,並封裝圖表生成方法

效果圖

JS

let rst = [
            {
                name: 'Matcha Latte',
                data:[
                    {time: '2012',num: 365},
                    {time: '2013',num: 815},
                    {time: '2014',num: 665},
                    {time: '2015',num: 565},
                ]
            },{
                name: 'Milk Tea',
                data:[
                    {time: '2012',num: 265},
                    {time: '2013',num: 615},
                    {time: '2014',num: 465},
                    {time: '2015',num: 965},
                ]
            },{
                name: 'Cheese Cocoa',
                data:[
                    {time: '2012',num: 765},
                    {time: '2013',num: 215},
                    {time: '2014',num: 765},
                    {time: '2015',num: 165},
                ]
            }
        ];
        

        let chartOption = {
            el:'#chart',//放置圖表的元素css選擇器
            title: '市場飲料銷售狀況',//圖表標題
            unit: '噸',
            dataArr: rst,
            
        }

        
        /**
         * chtOption = {
         *  el:'', //放置圖表的元素css選擇器
            title: '', //圖表大標題
            unit: [], //單位
         * }
         * 
         * */
        function barChart (chtOption){
            let myChart = echarts.init(document.querySelector('#chart'));
            let dataObj = {
                series: [],//系列數據
                xData:[],//x軸數據
                yData:[],//類目數據
                source: [],
                chartType: [],
                
            }
            for(let i in chtOption.dataArr[0].data){
                dataObj.series.push(chtOption.dataArr[0].data[i].time);
            }
            for(let i in chtOption.dataArr){
                let perSeries = [];
                perSeries.push(chtOption.dataArr[i].name);
                for(let j in chtOption.dataArr[i].data){
                    perSeries.push(chtOption.dataArr[i].data[j].num);
                    
                }
                dataObj.xData.push(perSeries);
                dataObj.yData.push(chtOption.dataArr[i].name);
            }
            let dataSeries =  ['name_value'];
            for(let i in dataObj.series){
                dataSeries.push(dataObj.series[i]);
                dataObj.chartType.push({type: 'bar'});
            }
            dataObj.source.push(dataSeries);
            for(let i in dataObj.xData){
                dataObj.source.push(dataObj.xData[i]);
            }
            let option = {
                title: {
                    text: chtOption.title,
                    textAlign: 'left'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: chtOption.series
                },
                grid: {
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                dataset: {
                    source: dataObj.source
                },
                xAxis: [
                    { gridIndex: 0,name: '單位: ' + chtOption.unit}
                ],
                yAxis: [
                    {type: 'category',gridIndex: 0}
                ],
                series: dataObj.chartType
            };

            myChart.setOption(option);
        }
        
        barChart(chartOption);