同一位置统一大小的两个div分别放Echarts图表

coderPy 2018-05-18 02:51:26

现有需求如下：我在同一个界面中的同一个位置放了两个相同大小的div（两个div平时都display:none,当选择按钮一时取消id="main1"这个div的 display:none属性让他显示出来，当选择按钮二时取消id="main2"这个div的 display:none属性让他显示出来），现在我设置了两个Echarts图表，分别绑定main1和main2. 但是现在问题是，当我将一各Echarts图表的js注释时，另一个图表完全正常，但是当我将两个Echarts图表都放在那儿时，界面中就只有一个图表正常，两个图表不能同时使用。
请各位大佬帮忙解释下，提供下解决方案

代码如下：
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '/static/echarts-2.2.7/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line', // 使用折线图就加载line模块，按需加载
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main1'));
var option = {

title: {
text: '销售量数据统计',
subtext: '模拟数据'
},
tooltip: {
trigger: 'axis',
type: 'time',
trigger: 'item'
},
legend: {
data: ['销售量']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: []
},
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name: '月销售量',
type: 'line',
data: [],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},

]
};
$('.month_span').click(function () {
var mon_id = $(this).next().text();
console.log(mon_id);
$.post('/ajax_mon_number/', {'mon_id': mon_id}, function (res) {
debugger;
var resdata = eval(res);
console.log('这是后台渠道的数据', resdata);
myChart.setOption({
xAxis: [
{
type: 'category',
boundaryGap: false,
data: resdata[0]
},
],
series: [
{
name: '月销售量',
data: resdata[1],
},

]
});

});
});
myChart.setOption(option);
}
);
</script>

<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '/static/echarts-2.2.7/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line', // 使用折线图就加载line模块，按需加载
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main2'));
var option = {

title: {
text: '销售量数据统计',
subtext: '模拟数据'
},
tooltip: {
trigger: 'axis',
type: 'time',
trigger: 'item'
},
legend: {
data: ['销售量']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: []
},
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name: '月销售量',
type: 'line',
data: [],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},

]
};
$('#select').click(function () {
var sta = $('#start_day').val();
var end = $('#end_day').val();
console.log(sta, end);
$.post('/ajax_num/', {'sta': sta, 'end': end}, function (res) {
var resdata = eval(res);
myChart.setOption({
xAxis: [
{
type: 'category',
boundaryGap: false,
data: resdata[0]
},
],
series: [
{
name: '月销售量',
data: resdata[1],
},

]
});
})
});
myChart.setOption(option)
}
);
</script>

...全文