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");
