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 结果

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

canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
利用highchart实现动态饼状图
利用highchart实现动态饼状图引言 highchart 动态饼状图直接上代码代码说明效果图引言一直习惯于用highchart.js完成数据可视化页面的制作,做了很多图表都没有真正的整 ...
地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
使用echarts画饼状图，设置饼状图颜色
前言: 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. 图表在容器中可以调整位置,让图表显示的更完整. 今日分享重点:画饼状图. 1.引入相关js <script type=& ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
Echarts百分比饼状图
百分比饼状图两个关键点 1.设置最大值 const maxVal = 100 2.data里两份数据 data: [{value: val, // 原始数据不做展示},{value: maxVal - ...
echart关系树状图_Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...

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

1 饼状图代码（动态）

2 柱形图（静态）

3 关系图代码（动态）

4 结果

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

最新文章

热门文章