echarts实现一个页面同时显示多个图表

echarts实现一个页面同时显示多个图表（例如：柱状图、环形图、仪表盘等等），并且每个图表都要动态加载数据库中的数据，最好附上一个简单例子的源代码，图片中是大概要实现的效果图，谢谢。图片说明

先将页面用div标签分割好，每个div都要指定宽度和高度
接着，用ajax动态加载数据
然后，编写你要的图标类型的option
最后，获取对应的div，创建echart实例，并调用setOption方法设置选项，这样图表就显示在对应的div中了

要几个模板就写几个ajax请求获取数据，

1.想要 创建 几个 图表，就创建几个div ,为div设置好宽高 ，以及布局。
2.用ajax动态请求数据 ，将返回的数据对div图表进行 初始化（注：此处要判断图表 的div是否已经初始化，没有初始化在进行
如：
if(!myChart){
myChart = echarts.init(document.getElementById('echart'));
}）；
3.为初始化的myChart 设置option；如：
var option = {
legend: {
data:['投入品统计图']
},
calculable : true,
tooltip : {
trigger: 'axis'
},
xAxis : [
{
type: 'category',
axisLabel : {
formatter: '{value}月'
},
boundaryGap: true,
data: (function(){
var d = [];
for(var item in result){
//d.push(result[item].m);
d.push(result[item].m.split("-")[1])
}
return d;
})()
}
],
yAxis : [
{
type: 'value',
axisLabel : {
formatter: format
}
}
],
grid: {
left: '20px',
right: '20px',
bottom: '15px',
containLabel: true
},
series : [
{
name:'投入品统计图',
type:type,
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:(function(){
var d = [];
for(var item in result){
d.push(result[item].num);
}
return d;
})()
}
]
};
4.为myChart 设置option 如：myChart.setOption(option); 即可
5.几个图表， 就创建几个全局的mychart;如mychart1，mychart2......等，上面的option是最简单的折线图，相关图表的option请参照
echart官网实例即可

这种大屏展现功能代码还是很多的！首先要创建一个容器，然后讲你的图标放进容器展现

1.就像3楼所说的，你可以先用 div 切割好你的页面，然后在不同的div里面放入不同的图表就行了，你可以定义多个option，然后给不同的div里set不同的option
2.你可以每个图都用一个单独的页面来画，然后再写一个页面通过 iframe 来引用他们

方法还是有的，就看哪一种比较适合你

1.页面设计：分割每个图表所需的Div宽高，并给每个div 块定义不同的ID；
2.分步设置：每个div对应设置不同的option，一个div对应一个option；
3.动态获取数据：若想从后台获取动态数据加载图表，可选择ajax 分别从后台获取数据，最后解析填充带option里面；
4.注意如果某一个图表的数据获取不到或者获取出现问题，应该单独给出提示，不然会使页面显得整洁有序一点。
上面只是根据我用过的echars来总结的小经验，希望对你有帮助。

3个option，3个ajax请求后台分别获取3个图里的数据，3个option写到一个jsp

就个数组保存myChart所有实例,然后每个都调用一下resize
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var charts = [];
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
charts.push(myChart);

myChart = echarts.init(document.getElementById('main2'));
myChart.setOption(option);
charts.push(myChart);

window.onresize = function(){
    for(var i = 0; i < charts.length; i++){
        charts[i].resize();
    }
};

你创建多个容器就可以了

1.想要 创建 几个 图表，就创建几个div ,为div设置好宽高 ，以及布局。
2.用ajax动态请求数据 ，将返回的数据对div图表进行 初始化（注：此处要判断图表 的div是否已经初始化，没有初始化在进行
如：
if(!myChart){
myChart = echarts.init(document.getElementById('echart'));
}）；
3.为初始化的myChart 设置option；如：
var option = {
legend: {
data:['投入品统计图']
},
calculable : true,
tooltip : {
trigger: 'axis'
},
xAxis : [
{
type: 'category',
axisLabel : {
formatter: '{value}月'
},
boundaryGap: true,
data: (function(){
var d = [];
for(var item in result){
//d.push(result[item].m);
d.push(result[item].m.split("-")[1])
}
return d;
})()
}
],
yAxis : [
{
type: 'value',
axisLabel : {
formatter: format
}
}
],
grid: {
left: '20px',
right: '20px',
bottom: '15px',
containLabel: true
},
series : [
{
name:'投入品统计图',
type:type,
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:(function(){
var d = [];
for(var item in result){
d.push(result[item].num);
}
return d;
})()
}
]
};
4.为myChart 设置option 如：myChart.setOption(option); 即可
5.几个图表， 就创建几个全局的mychart;如mychart1，mychart2......等，上面的option是最简单的折线图，相关图表的option请参照
echart官网实例即可

要几个模板就写几个option啊，然后动态加载数据的话用ajax请求就可以了啊