在專案中通常不會只顯示一個種類的圖表，如果在有多種配置的圖表要怎麼進行顯示？如下：
在echarts官網中首先要有一個帶有id的和高度的標籤，但是往往這個標籤並不能在頁面中寫死，所以就需要動態進行新增。

1.把一個配置作為一個大的物件放到陣列物件switchList中。（對配置中的圖表顯示的標籤id迴圈時把index放入id中拼成新的id，防止出現相同的id值。）

<div class="tubiaoShow" *ngFor="let switchItem of switchList">
    <div class="" [ngSwitch]='tableItem.type'
 
 *ngFor="let tableItem of switchItem.data;let i = index">
        <div class="addArea">
            <div [hidden]="switchItem.add"><button class="addCollect bg-169bd5" (click)="addSave(switchItem.saveDt,switchItem)">新增收藏</button></div>
            <div [hidden]="!switchItem.add"
 
><button class="cancelCollect bg-bdbdbd" (click)="cancelDeleteSelf(switchItem.saveDt,switchItem)">取消收藏</button></div>

        </div>
        <div *ngSwitchCase="'4fcf9657-26d3-4239-a8b1-3c415117940b'" id="yibiao{{switchItem.index}}"></div>

            <div *ngSwitchCase
 
="'a5346865-4329-4402-b5a3-5826fe66cd29'" id="pile{{switchItem.index}}"></div>

            <div *ngSwitchCase="'b37f8c5a-f30d-4200-a592-e2b03e4cf718'" id="column{{switchItem.index}}"></div>

            <div *ngSwitchCase="'51ae67ef-5743-4ed4-8ab6-a7001ff153ad'" id="polyline{{switchItem.index}}"></div>

            <div *ngSwitchCase="'1b8dccb8-dbc6-49c6-943c-de9aa5456491'" id="pie{{switchItem.index}}"></div>

            <div *ngSwitchCase="'3e272915-09c0-424f-b74d-8ad963d17cb3'" id="leida{{switchItem.index}}"></div>

            <div *ngSwitchCase="'59ae8514-406c-4774-971a-cb02d94e2ce8'" id="sandian{{switchItem.index}}"></div>

    </div>
</div>

2.把每個列表寫成一種方法在大迴圈中進行呼叫。
對資料進行處理的類似方法如下：
（switchList是獲取的配置的陣列資料，下面程式碼中的item.data[j].type == this.chartType.pile是通過type值來判斷圖表的型別）

//資料處理

tableDataHandle(){
        if(this.switchList.length != 0){
            this.switchList.forEach((item,index)=>{
                for (let j in item.data) {
                    var chartInfo = item.data[j];
                    if (item.data[j].type == this.chartType.pile) {
                        this.getChartPile(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.line){
                        this.getChartLine(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.column){
                        this.getChartColumn(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.pie){
                        this.getChartPie(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.radar){
                        this.getChartRadar(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.scatter){
                        this.getChartSanDian(chartInfo,j,index);
                    }else if(item.data[j].type == this.chartType.yibiao){
                        this.getChartYibiao(chartInfo,j,index);
                    }
                }
            })
        }
    }

下面以一種圖表為例：
（以散點圖為例）

    //散點
    getChartSanDian(data,i,index){
        let chartDisplay = 'sandian' + index;
        //動態載入
        var parent = document.getElementById(chartDisplay);
        parent.innerHTML = '';
        //新增div
        let divName = "sandian"+index+i;
        let divName1 = "sandiandataCome"+index+i;//資料來源
        let zhexian = document.getElementById(divName);
        let source = document.getElementById(divName1);
        if(zhexian){
            parent.removeChild(zhexian);
        }
        if(source){
            parent.removeChild(source);
        }
    　　 var div = document.createElement("div");
        //設定 div 屬性，如 id
        div.setAttribute("id",divName);
        div.style.height = '400px';
        div.style.width = (document.body.clientWidth-20)+'px';
        parent.appendChild(div);

        //動態新增資料來源資料
    　　var span = document.createElement("span");
        span.setAttribute("id",divName1);
        span.setAttribute("class",'dataCome');
        parent.appendChild(span);
        let dataName = document.getElementById(divName1) as HTMLDivElement;
        let sourceTxt = '';
        for(let t in data.source){
            sourceTxt+=data.source[t];
        }
        dataName.innerText = '資料來源:'+sourceTxt;

        document.getElementById(divName).removeAttribute('_echarts_instance_');
        var myChart = ECharts.init(document.getElementById(divName) as HTMLDivElement);
        myChart.setOption({
            title : {
                text: data.title
            },
            tooltip : {
                trigger: 'axis',
                showDelay : 0,
                confine: true,
                formatter : function (params) {
                    if (params.length > 1) {
                        var returnData = '';
                        for(let g in params){
                            returnData += params[g].seriesName + ':'
                            + params[g].value[1] + '<br/>';
                        }
                        return returnData;
                    }else {
                        return params[0].seriesName + ' :<br/>'
                           + params[0].value[0] + ':' + params[0].value[1];
                    }
                },  
                axisPointer:{
                    show: true,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1
                    }
                }
            },
            grid: {
                left: '2%',
                containLabel: true
            },
            legend: {
//              data:data.option.legend.data,//['女性','男性']
                bottom : '0px'
            },
            xAxis : [
                {
                    type : 'category',
                    scale:true,
                    data:data.option.xAxis[0].data,
                    axisLabel : {
                        formatter: data.option.xAxis[0].data
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    axisLabel : {
                        formatter: '{value}'
                    }
                }
            ],
            series : data.option.series
        })

        window.addEventListener("resize",function(){
          myChart.resize();
        });
    }

記錄一下，以後參考使用！！！