Echart 两个图表怎么并排显示?

afen888 发布于 2015/09/23 13:34
阅读 3K+
收藏 0

我建了两个图表,一个DIV,怎么让两个图表并排显示?左边是line   右边是pie     现在我的情况是,这两个图表是叠加在一起显示的,我不是要的这样的效果。请问有什么办法? 

下面是我的图表代码:

<!DOCTYPE html>
<html lang="zh-CN">


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>web-report</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
</head>


<body>
<div class="container">
<!--导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://jiaj.com.cn" class="navbar-brand"><img src="img/LOGO.png" class="img-responsive" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">社区医生分析 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="report1-1.html">社区医生汇总</a></li>
<li><a href="report1-4.html">社区发送信息</a></li>
<li><a href="report1-3.html">活跃社区</a></li>
</ul>
<li><a href="report2.html">用户量汇总</a></li>
<li><a href="report3.html">用户使用情况</a></li>
<li><a href="report4.html">对话汇总</a></li>
<li><a href="report5.html">发贴情况</a></li>
</li>
</ul>
</div>
</div>
</nav>
<!--图表,是三个图表嵌套使用,想法是:三个图表共用一个data,所以需要定义三个option,三个mychart,在末尾放三个charrts加载数据;三个图表放在同一个require中-->


<div id="rp2-r" style="width:69%;height:400px;float: left;margin-bottom: 30px;margin-top: 20px;"></div>


<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<!--以下为line+bar-->
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
//堆叠图
function line(ec) {
// 基于准备好的dom,初始化echarts图表,定义在哪个DIV里显示
var myChart = ec.init(document.getElementById('rp2-r')); //option
myChart.showLoading({
text:'正在努力的读取数据中......'
});
myChart.hideLoading();//隐藏Loading
// var mychart2 = ec.init(document.getElementById('rp2-l-bottom'));//option2
var option = ""; //先定义option,这里是所有的数据,后填充,定义的数据为空,
//异步调用表格数据使用$.ajax
$.ajax({
type: "get",
url: "http://devapi.jiaj.com.cn:8080/jiajian-service/api/v1/report/user/summary", //调用地址
data: "",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
//调用成功后执行下面的数据,下面的这一块是右边bar图
success: function(data) {
var xzhou = [];
var c_doctor = []; //社区箬医生
var c_family = []; //社区家庭
var Specialist = []; //专科医生
var c_Specialist = []; //认证专科医生
var c_Sdoctor = []; //认证社区医生
var total = [];
//定义for循环,用于获取data数据
for (var x = 1; x < data.length; x++) { //
xzhou.push(data[x].date); //为X轴填充X轴的数据为'日期'
c_doctor.push(data[x].generalPractitionerRegistrationCount);
c_family.push(data[x].familyRegistrationCount);
Specialist.push(data[x].specialistPractitionerRegistrationCount);
c_Specialist.push(data[x].specialistPractitionerVerificationCount);
c_Sdoctor.push(data[x].generalPractitionerVerificationCount);
total.push(data[x].generalPractitionerRegistrationCount + data[x].familyRegistrationCount + data[x].specialistPractitionerRegistrationCount + data[x].specialistPractitionerVerificationCount + data[x].generalPractitionerVerificationCount); //和
}
//填充option数据
option = {
title: {
text: '用户量汇总分析',
subtext: '每日更新',
x: 'center',
y: 'top'
},
tooltip: {
trigger: 'axis',
axisPointer: { //坐标轴指示器
type: 'shadow' //阴影
}
},
//图表数据名称
legend: {
orient: 'horizontal', //horizontal水平布局
// orient:'vertical',//vertical垂直布局
x: 'center',
y: 'bottom',
data: ['社区医生', '社区家庭', '专科医生', '认证专科医生', '认证社区医生']
},
// dataRange: {
// orient:'horizontal',
// x:'right',
// y:'bottom'
// },
//是否打开拖拽计算功能
calculable: true,
//x轴数据名称以及类型
xAxis: [{
type: 'category',
data: xzhou,
}],
//y轴数据类型
yAxis: [{
type: 'value',
splitArea: {
show: true
}
}],
//直角坐标系内绘图网格
grid: {
x2: 40 //
},
//图表内容,上面定义几个个要显示的图表内容,这里就要填充几个
series: [{
//
"name": "社区医生",
"type": "bar",
"stack": "总量",
"data": c_doctor
},
//
{
"name": "社区家庭",
"type": "bar",
"stack": "总量",
"data": c_family
},
//
{
"name": "专科医生",
"type": "bar",
"stack": "总量",
"data": Specialist
},
//
{
"name": "认证专科医生",
"type": "bar",
"stack": "总量",
"data": c_Specialist
}, {
"name": "认证社区医生",
"type": "bar",
"stack": "总量",
"data": c_Sdoctor
},
//增加所有列的总数内容
{
"name": "总数",
"type": "line",
"data": total //data类型为上面定义的data名称
},
]
};
//option1
option.legend.data.push('rp2-l');
option.series.push({
name: '用户',
type: 'pie',
radius: '55%',
center: ['50%', 225],
data: [
//value取JSON第一行总数的值
{
value: data[0].generalPractitionerRegistrationCount,
name: '社区医生'
}, {
value: data[0].familyRegistrationCount,
name: '社区家庭'
}, {
value: data[0].specialistPractitionerRegistrationCount,
name: '专科医生'
},
]
});
// 为option对象加载数据 
myChart.setOption(option);
//为option1对象加协数据
},
error: function(xhr) {
var msg = JSON.stringify(xhr);
},
});
}
);
</script>
<!--report2-->
<table class="table table-bordered table-hover table-w80" id="tab2">
</table>
</div>
<script>
$(function() {
getreport1();
});


function getreport1() {
$.ajax({
type: "get",
url: "http://devapi.jiaj.com.cn:8080/jiajian-service/api/v1/report/user/summary",
data: " ",
dataType: "json ",
contentType: "application/json; charset=utf-8",
success: function(data) {
//表格框架
var tab = "<thead><tr><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner \">日期</div><div class=\"fht-cell\"></div></th><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner \">社区医生</div><div class=\"fht-cell\"></div></th><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner \">社区家庭</div><div class=\"fht-cell\"></div></th><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner \">专科医生</div><div class=\"fht-cell\"></div></th><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner \">认证专科医生</div><div class=\"fht-cell\"></div></th><th style=\"text-align: center; vertical-align: middle; \"><div class=\"th-inner\">认证社区医生</div><div class=\"fht-cell\"></div></th></tr></thead>";
//表头
tab += "<tr><td>总计</td><td>" + data[0].generalPractitionerRegistrationCount + "</td><td>" + data[0].familyRegistrationCount + "</td><td>" + data[0].specialistPractitionerRegistrationCount + "</td><td>" + data[0].specialistPractitionerVerificationCount + "</td><td>" + data[0].generalPractitionerVerificationCount + "</td></tr>";
//循环
for (var x = 1; x < data.length; x++) {
tab += "<tr><td>" + data[x].date + "</td><td>" + data[x].generalPractitionerRegistrationCount + "</td><td>" + data[x].familyRegistrationCount + "</td><td>" + data[x].specialistPractitionerRegistrationCount + "</td><td>" + data[x].specialistPractitionerVerificationCount + "</td><td>" + data[x].generalPractitionerVerificationCount + "</td></tr>";
}
//
tab += "</table>";
//输出
document.getElementById("tab2").innerHTML = tab;
},
error: function(jqXHR, textStatus, errorThrown) {
alert("数据错误");
}
});
}
//表格工具栏
// $(function(){
// $('#tab2').bootstrapTable({
// striped:true,
// pagination: true,
//                pageSize: 50,
//                pageList: [10, 25, 50, 100, 200],
//                search: true,
//                showColumns: true,
//                showRefresh: true,
//                minimumCountColumns: 2,
// })
// });
</script>
</body>


</html>

加载中
0
莫铭
莫铭

(1)混搭:设置一下饼图的半径和圆心坐标,两个图在一个坐标系中显示。比如:

name: '用户',
type: 'pie',
radius: 50,  //半径
center: [180, 60], //圆心坐标



设置合理,就不会重叠。

(2)建两个DIV,一个DIV一个图,用CSS布局将两个图隔离。

0
afen888
afen888
谢谢,我最后选择是的两个DIV,一个DIV一个图的方法。现在搞定了
返回顶部
顶部