Echarts动态饼状图，柱形图，关系图绘制

1 饼状图代码（动态）

  //echarts图
        var chrNumber =[];
        var chrnum=[];
        for (var i=0;i<data.chrNum.length;i++){//通过ajax获取后台数据，再将传入数组
            chrNumber.push(data.chrNumber[i]);
            chrnum[i]={value:data.chrNum[i],name:data.chrNumber[i]};
    }
        var option = {
        // title : {//标题
        //     text: 'Super-enhancers distribution of chromosomes',
        //     x:'center'
        // },
        tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
        legend: {
        orient: 'vertical',
        left: 'left',
        data:chrNumber
    },
        series : [
    {
        name: 'Number',
        type: 'pie',
        radius : '55%',
        label: { //标签不显示
            normal:{
                show:false
            }
        },
        center: ['60%', '50%'],
        data:chrnum,
        itemStyle: {
        emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)',

    }
    }
    }
        ]
    };
        ;
        myChart.setOption(option, true);

2 柱形图（静态）

 //species 静态绘制
    var dom = document.getElementById("SpeciesType");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        color: ['#EAC222'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {             // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            },
            top: '25',
        },
        // textStyle:{
        //     fontFamily:"Microsoft YaHei",
        //     fontSize:10,
        //     fontStyle:"normal"
        // },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '26%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Arabidopsis thaliana','Solanum lycopersicum','Oryza sativa','Zea mays','Cucumis melo','Prunus persica','Populus trichocarpa','Pyrus x bretschneideri','Sorghum bicolor','Eucalyptus grandis','Ananas comosus','Cucumis sativus','Citrullus lanatus','Medicago truncatula','Vitis vinifera','Solanum pennellii','Setaria italica','Malus domestica','Glycine max','Fragaria vesca','Solanum phureja','Musa acuminata','Carica papaya','Brachypodium distachyon','Arachis hypogaea','Spirodela polyrhiza','Setaria viridis','Phaseolus vulgaris','Hordeum vulgare','Eutrema salsugineum','Asparagus officinalis','Marchantia polymorpha','Triticum aestivum','Gossypium raimondii','Gossypium hirsutum','Gossypium barbadense','Gossypium arboreum'],
            axisLabel: {
                interval:0,
                fontFamily:"Microsoft YaHei",
                fontSize:8,
                rotate:55//角度顺时针计算的
            },
        },

        yAxis: {
            type: 'value'
        },
        series: [{
            name: 'number',
            type: 'bar',
            barWidth: '60%',
            data: [190,93,60,49,30, 21, 18,14,12,12,12,10,10,9,8,8,8,7,7,7,6,6,6,6,4,3,3,3,3,3,3,2,1,1,1,1,1]
        }]
    };

    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

3 关系图代码（动态）

 //echarts关系图 Accessible chromatin region associated network
 //传入参数数组类型或者字符串类型
            function openView1(Chromatin_Accessibility_Region, tfId, ProAyy,  title) {
                this.open = function () {
                    var myChart = echarts.init(document.getElementById('region_overview_view'));
                    var links = [], data = [];
                    var onlys = [];
                    data.push({
                        category: 0,
                        id: title,
                        name: Chromatin_Accessibility_Region,
                        symbolSize: 40,
                        value: 1
                    });
                    for (var i=0;i<tfId.length;i++) {
                        if (tfId[i] == "-") continue;
                        links.push({source: title, target: tfId[i]});
                        if (onlys.indexOf(tfId[i]) != -1) continue;
                        onlys.push(tfId[i]);
                        data.push({
                            category: 1,
                            id: tfId[i],
                            name: tfId[i],
                            symbolSize: 18,
                            value: 1
                        });
                    }
                    for (var j=0; j<ProAyy.length;j++) {
                        console.log(ProAyy[j]);
                        if (ProAyy[j] == "-") continue;
                        links.push({source: title, target: ProAyy[j]});
                        if (onlys.indexOf(ProAyy[j]) != -1) continue;
                        onlys.push(ProAyy[j]);
                        data.push({
                            category: 2,
                            id: ProAyy[j],
                            name: ProAyy[j],
                            symbolSize: 18,
                            value: 1
                        });
                    }

                    option = {
                        legend: {
                            data: [title, 'TF Binding', 'Associated Gene']
                        },
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        color: ['#B82E00', '#6e7074', '#d48265'],
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            animation: false,
                            roam: true,
                            focusNodeAdjacency: true,
                            itemStyle: {
                                normal: {
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: 'source',
                                    curveness: 0
                                }
                            },
                            emphasis: {
                                normal: {
                                    lineStyle: {
                                        width: 10
                                    }
                                }
                            },
                            draggable: true,
                            data: data,
                            links: links,
                            categories: [{name: title}, {name: 'TF Binding'}, {name: 'Associated Gene'}],
                            force: {
                                repulsion: 200,
                                gravity: 0.1,
                                edgeLength: 100,
                                layoutAnimation: false
                            }
                        }]
                    };

                    myChart.setOption(option);
                }
                this.open();
            }
            openView1(genomicRegion,tfId,ProAyy,"Accessible chromatin region");

4 结果