图标统计
柱形统计图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/echarts.js"></script>
<style>
#main1{
height: 500px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main1"></div>
<script>//条形统计
var myBarChart = echarts.init(document.getElementById('main1'));
myBarChart.showLoading(); //加载数据的时候会出现动画效果
var buildNames=["A栋","B栋","C栋"]; //该数组保存的是楼栋的名字
var buildRoomCounts = [10,8,15]; //保存楼栋的房间个数
var renteds = [4,3,6]; //保存出租数
var solds = [2,3,4]; //保存售出数
//根据小区的编号请求数据
//开始设计图标统计的相关参数
var option={ //设置图表统计的相关配置
title:{//定义y轴上方的名称
text:'数量/(间)'
},
tooltip:{
//定义悬浮提示信息，此时是默认的
},
legend:{
data:['房间总数','已出售','已出租'],
},
xAxis:{ //定义x轴的内容
type:'category', //如果为category，则以类别的形式进行统计，还可以是time，但是该类型一般是在折线统计图中使用（股票）
//楼栋的名称
data:buildNames
//data:['10号楼','20号楼','30号楼']
},
yAxis:{
max:15,
min:0,
splitNumber:15 //定义刻度
},
//series: 定义出现统计条的基本信息
//一个series中的每个对象 表示一个类别中的条形的信息
series:[
{ //统计房间数
type:'bar',
name:'房间总数',
data:buildRoomCounts,
//data:[1,2,3,10]
},{ //统计房间的出租数量
type:'bar',
name:'已出租',
data:renteds
},{ //统计房间的出售数量
type:'bar',
name:'已出售',
data:solds
}]
//lable:{
//normal:{
// show:true,
// position:'top',
// textStyle:{
// color:'black'
//}
//}
//}
};
myBarChart.setOption(option);
myBarChart.hideLoading();//隐藏加载动画
</script>
</body>
</html>
扇形统计图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/echarts.js"></script>
<style>
#main1,#main2{
height: 500px;
width: 800px;
margin: 0 auto;
border: solid pink 1px;
}
</style>
</head>
<body>
<div id="main1"></div>
<div id="main2"></div>
<script>
//初始化echarts图标
var pieChart1 = echarts.init(document.getElementById('main1'));
var option1 = { //为统计图进行基本的设置
title:{
show:"true", //是否显示标题，默认显示，可以不设置
text:"已出租比例分析",//图标标题文本内容
top:"60px",
left:"center" //标题的水平方向位置
},
tooltip:{
//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
//'axix'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
},
series:[{
name:'已出租比例分析',
type:'pie', //统计类型是按照扇形比例统计
radius:'55%', //扇形半径
center:['50%','60%'], //扇形出现的位置控制
data:[
{name:"A 栋",value:3},
{name:"B 栋",value:4},
{name:"C 栋",value:5},
{name:"D 栋",value:6},
]
}]
};
// 为对象echarts对象加载数据
pieChart1.setOption(option1);
//统计出售比例的扇形统计图
var pieChart2 = echarts.init(document.getElementById('main2'));
var option2 = { //为统计图进行基本的设置
title:{
show:"true", //是否显示标题，默认显示，可以不设置
text:"已出售比例分析",//图标标题文本内容
top:"60px",
left:"center" //标题的水平方向位置
},
tooltip:{
//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
//'axix'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
},
series:[{
name:'已出售比例分析',
type:'pie', //统计类型是按照扇形比例统计
radius:'55%', //扇形半径
center:['50%','60%'], //扇形出现的位置控制
data:[
{name:"A 栋",value:3},
{name:"B 栋",value:8},
{name:"C 栋",value:7},
{name:"D 栋",value:2},
]
}]
};
// 为对象echarts对象加载数据
pieChart2.setOption(option2);
</script>
</body>
</html>
折线统计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/echarts.js"></script>
<style>
#main1{
height: 500px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main1"></div>
<script>
//折线图
var myLine = echarts.init(document.getElementById('main1'));
var option = {
//backgroundColor:'pink',
title:{
text:'未来一周气温变化',
subtext:'摄氏度/ ℃'
},
tooltip:{
//控制悬浮提示框信息ooltip的trigger的值可以有'item'，'axis'
//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图标中使用
//'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
tigger:'axis'
},
ledend:{
//orient 设置布局方式，默认水平布局，可选值：'horizontal(水平)'，'vertical(垂直)'
//orient：'horizontal',
//x 设置水平安放位置，默认全图居中，可选值：'center'，'left'，'right'，{number}(x坐标,单位px)
x:'250',
//y 设置垂直安放位置，默认全图顶端，可选值：'top'，'bottom'，'center'，{number}(y坐标,单位px)
y:'10',
data:['最高气温','最低气温']
},
toolbox:{ //工具框配置
show:true,
feature:{
dataView:{show:true,readOnly:false}, //数据视图
magicType:{show:true,type:['line','bar']}, //其他形状转换
restore:{show:true}, //是否显示刷新
saveAslmage:{show:true} //下载
}
},
xAxis:[
{
type:'category',
boundaryGap:false, //控制折线是否从y轴开始
data:['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{ //控制X轴样式
lineStyle:{
//设置x轴颜色
color:'#912CEE'
}
},
// 设置X轴数据旋转倾斜
axisLable:{
rotate:45, //旋转角度
interval:0 //设置X轴数据间隔几个显示一个，0表示每个都显示
}
}],
yAxis:{
type:'value', //表示显示具体的数值
min:-10, //设置y轴刻度的最小值
max:70, //设置y轴刻度的最大值
splitNumber:10, //刻度的个数
axisLable:{
formatter:'{value} ℃'
}
},
series:[ //设置折线的相关配置
{
name:'最高气温',
type:'line',
data:[11,11,15,13,12,13,10],
markPoint:{//是否重点显示最高和最低气温
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{ //是否显示平均线
data:[
{type:'average',name:'平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1,-2,2,5,3,2,0],
markPoint:{
data:[
{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
}
]
};
myLine.setOption(option);
</script>
</body>
</html>
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
