Echarts示例总结
以下示例仅为图形填充过程的主要示例option代码，效果图为动态的，数据是静态的。
示例一
示例1代码：
//分街道 饼图
function drawBuilding(ec)
{
var myChart = ec.init(document.getElementById("building"));
option = {
title : {
text: '房屋(保障房)柱状统计图',
},
tooltip : {
trigger: 'axis'
},
legend: {
x: 'center',
y: 'bottom',
data:['经济适用房','廉租房','公共租赁房','定向安置房','两限商品房','安居商品房']
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['xxx镇','xxx镇','xxxx镇','xxx镇','xxx镇','xxx镇','xxx镇',
'xxxx镇','xxxx镇','xxxx镇','xxxx镇','xxxxx道','xxxx街道','xxx街道'
,'xxx街道','xxx街道','xxxx街道'],
axisLabel:{
formatter:function(val){
return val.split("").join("\n");
},
textStyle:{
color: '#B6A2DE',
},
interval:0,
//rotate:45,
margin:2,
}
}
],
grid: { // 控制图的大小，调整下面这些值就可以，
x: 100,
x2: 100,
y2: 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 户'
}
}
],
series : [
{
name:'经济适用房',
type:'bar',
data:[60, 40, 120, 230, 250, 760,320,11,240,250,120,210,320,56,910,220,140],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:'廉租房',
type:'bar',
data:[220, 430, 710, 230, 550, 360,320,410,240,320,120,430,120,560,310,220,600],
markPoint : {
data : [
{type : 'max',name : '街镇最高'},
{type : 'min',name : '街镇最低'}
]
}
},
{
name:'公共租赁房',
type:'bar',
data:[250, 280, 170, 430, 250, 460,320,180,240,250,120,430,320,560,610,220,140],
markPoint : {
data : [
{type : 'max',name : '街镇最高'},
{type : 'min',name : '街镇最低'}
]
}
},
{
name:'定向安置房',
type:'bar',
data:[210, 420, 270, 230, 250, 320,302,11,306,250,120,430,320,308,710,220,340],
markPoint : {
data : [
{type : 'max',name : '街镇最高'},
{type : 'min',name : '街镇最低'}
]
}
},
{
name:'两限商品房',
type:'bar',
data:[540, 420, 70, 206, 250, 360,320,110,240,650,120,403,302,506,410,220,140],
markPoint : {
data : [
{type : 'max',name : '街镇最高'},
{type : 'min',name : '街镇最低'}
]
}
},
{
name:'安居商品房',
type:'bar',
data:[220, 440, 507, 230, 250, 360,302,650,240,250,120,423,320,560,310,202,140],
markPoint : {
data : [
{type : 'max',name : '街镇最高'},
{type : 'min',name : '街镇最低'}
]
}
}
]
};
myChart.setOption(option);
}
示例2代码：
//分街道 -人房分离差异情况柱状图
function drawRfflqk(ec)
{
var myChart = ec.init(document.getElementById("rfflqk"));
option = {
title : {
text: '人房分离差异情况统计图'
},
tooltip : {
trigger: 'axis'
},
legend: {
x: 'center',
y: 'bottom',
data:['最近10年人房分离差异柱状图','最近10年人房分离差异折线图']
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['2005年','2006年','2007年','2008年','2009年','2010年','2011年',
'2012年','2013年','2014年','2015年']
}
],
grid: { // 控制图的大小，调整下面这些值就可以，
x: 100,
x2: 100,
y2: 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 户'
}
}
],
series : [
{
name:'最近10年人房分离差异柱状图',
type:'bar',
data:[110, 410, 320, 130, 650, 560,620,81,240,650,120,210,420,56,310,70,430],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"最近10年人房分离差异折线图",
type:'line',
smooth:'true',
data:[110, 410, 320, 130, 650, 560,620,81,240,650,120,210,420,56,310,70,430],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}示例3
示例3代码：
//租金范围 饼图 1000以下 1000-2000 2000-5000 5000-8000 8000 以上
function drawZjfw(ec)
{
var myChart = ec.init(document.getElementById('zjfw'));
var option = {
title : {
text: '租金范围统计分析',
x :'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['1000以下','1000-2000','2000-5000','5000-8000','8000 以上']
},
calculable : true,
series : [
{
name:'租金范围',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:15, name:'1000以下'},
{value:52, name:'1000-2000'},
{value:86, name:'2000-5000'},
{value:32, name:'5000-8000'},
{value:3, name:'8000 以上'},
]
}
]
};
myChart.setOption(option);
}
//房型结构 饼图
function drawFwjg(ec)
{
var myChart = ec.init(document.getElementById('fwjg'));
var option = {
title : {
text: '房屋结构统计分析',
x :'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y :'bottom',
data:['砖木结构','砖混结构','钢筋混泥土','钢结构']
},
calculable : true,
series : [
{
name:'房屋结构统',
type:'pie',
radius : '50%',
center: ['50%', '50%'],
data:[
{value:335, name:'砖木结构'},
{value:310, name:'砖混结构'},
{value:234, name:'钢筋混泥土'},
{value:135, name:'钢结构'}
]
}
]
};
myChart.setOption(option);
} 示例4（和示例3相似）
示例4代码：
//法人类别-饼图(企业法人)
function drawQyfr(ec)
{
var myChart = ec.init(document.getElementById('qyfr'));
var option = {
title: {
text: '企业法人',
x: 'center',
y: '30'
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'horizontal',
x: 'center',
y:'bottom',
data: ['全民所有制企业法人','集体所有制企业法人','私营企业法人','联营企业法人','中外合资经营企业法人','中外合作经营企业法人','外资企业法人']
},
calculable: true,
series: [{
name: '法人',
type: 'pie',
radius : ['20',"80"],
center: ['50%', '50%'],
roseType : 'area',
itemStyle: {
normal: {
label: {
// show:false
},
labelLine:{
show:true
}
},emphasis : {
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'全民所有制企业法人'},
{value:310, name:'集体所有制企业法人'},
{value:234, name:'私营企业法人'},
{value:234, name:'联营企业法人'},
{value:234, name:'中外合资经营企业法人'},
{value:234, name:'中外合作经营企业法人'},
{value:234, name:'外资企业法人'}
]
}]
};
myChart.setOption(option);
}
//法人类别-饼图(非企业法人)
function drawFqyfr(ec)
{
var myChart = ec.init(document.getElementById('fqyfr'));
var option = {
title: {
text: '非企业法人',
x: 'center',
y: '30'
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'horizontal',
x: 'center',
y:'bottom',
data: ['机关法人','事业单位法人','社会团体法人']
},
calculable: true,
series: [{
name: '法人',
type: 'pie',
radius : ['20',"80"],
center: ['50%', '50%'],
roseType : 'area',
itemStyle: {
normal: {
label: {
// show:false
},
labelLine:{
show:true
}
},emphasis : {
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'机关法人'},
{value:310, name:'事业单位法人'},
{value:234, name:'社会团体法人'}
]
}]
};
myChart.setOption(option);
}示例5
示例5代码：
//法人登记统计图
function drawFrdjtj(ec)
{
var myChart = ec.init(document.getElementById('frdjtj'));
var option = {
title : {
text: '法人登记走势图 ',
x:'left'
},tooltip : {
trigger: 'axis'
},
legend: {
data:['企业法人登记','非企业法人登记']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
},
min:100,
max:5000
}
],
series : [
{
name:"企业法人登记",
type:'line',
smooth:true,
data:[789,807,3343,788,544,3450,3076,865],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"非企业法人登记",
type:'line',
smooth:true,
data:[1340,1556,1530,1867,1473,1678,1977,1787],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}示例6
示例6代码：
//近10年，成立、变更、注销 折线图
function drawFrZxt(ec)
{
var myChart = ec.init(document.getElementById('FrZxt'));
var option = {
title : {
text: '近10年法人登记折线图 ',
x:'left'
},tooltip : {
trigger: 'axis'
},
legend: {
data:['成立','变更','注销'],
y : 'bottom'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2005年','2006年','2007年','2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
},
min:100,
max:5000
}
],
series : [
{
name:"成立",
type:'line',
smooth:true,
data:[1289,807,3343,588,644,2450,1076,665,1258,2341,1398],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"变更",
type:'line',
smooth:true,
data:[490,586,930,667,323,847,207,1487,2341,1025,542],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"注销",
type:'line',
smooth:true,
data:[1240,1756,830,967,1473,1278,1177,787,893,875,365],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}
扫一扫
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
