使用echars图表时,layui框架中,切换页面时,在火狐浏览器图表不显示问题情况;
图表效果如下:
代码如下:
1、html:
<div id="cumstorZ" style="height:360px;width: 100%;min-width: 996px;"></div>
2、Javascript:
//调用
canvsEr('mydram',['235','100','152'],['小米','色粉','而非是'],['235','100','152']);
/*** 绘图
* @id 绑定页面id
* @totallist 订单金额数据:eg:['235','100','152']
* @namelist 名字数据:eg:['小米','色粉','而非是']
* @selllist 销量数据:eg:['235','100','152']
****/
function canvsEr(id,totallist,namelist,selllist) {
var option = {
legend: {
data:['订单金额(元)','销量'],
scale: true,
right:'50%'
},
grid: [ {
top: '15%',
left: '1%',
scale: true,
right: '15%',
containLabel: true
}],
xAxis: {
type: 'category',
scale: true,
data: namelist,
label: {
normal: {
show: true,
position: 'top'
}
}
},
yAxis: [
{
type: 'value',
name: '订单金额(元)',
position: 'left',
scale: true,
min:0,
max:Math.max.apply(null,totallist),
axisLabel: {
formatter: '{value}'
},
label: {
normal: {
show: true,
position: 'top'
}
}
},
{
type: 'value',
name: '销量',
scale: true,
min:0,
max:Math.max.apply(null,selllist),
position: 'right',
axisLabel: {
formatter: '{value}'
},
label: {
normal: {
show: true,
position: 'top'
}
}
},
],
series: [
{
name: '订单金额(元)',
type: 'bar',
scale: true,
data:totallist,
itemStyle: {
normal: {
color: '#2ec7c9',
}
},
label: {
normal: {
show: true,
position: 'top'
}
}
},
{
name: '销量',
type: 'bar',
yAxisIndex: 1,
scale: true,
data: selllist,
itemStyle: {
normal: {
color: '#ff6450',
}
},
}
]
};
document.getElementById(id).style.display = "block";
document.getElementById(id).style.minWidth = "960px";
document.getElementById(id).style.height = "360px";
var myChart = echarts.init(document.getElementById(id));
window.onresize = myChart.resize();
myChart.setOption(option, true);
}