同一位置统一大小的两个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>
...全文
1082 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_41731506 2018-06-01
  • 打赏
  • 举报
回复
给他一个具体的宽高用px别用%比
coderPy 2018-05-18
  • 打赏
  • 举报
回复
有大佬帮忙解决吗?解决后追加800分,说到做到,在线等
coderPy 2018-05-18
  • 打赏
  • 举报
回复
没有人吗? 求大佬解答 在线等 挺急的。 有分哦

87,927

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧