echarts在ionic3中动态渲染多种图表

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

在项目中通常不会只显示一个种类的图表，如果在有多种配置的图表要怎么进行显示？如下：
在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();
        });
    }

记录一下，以后参考使用！！！