level 3
天泽lik
楼主
各位,目前我遇到一个问题:echarts进行ajax异步加载,刷新网页自适应代码失效,但我接下来进行滚动鼠标缩放页面操作后,图表自适应代码又起作用了。
提问:如何使图表异步加载后立即自适应
如下为相关代码
var chartDom = document.getElementById('cmm');
var myChart_cmm = echarts.init(chartDom);
$.ajax({
url: "{% url 'cmmdatas' %}",
type:"GET",
async:true,
success:function (res){
console.log(res)
myChart_cmm.setOption({
backgroundColor: 'rgba(128, 128, 128, 0.1)',
legend: {
top: '85%',
textStyle:{
color:'#fff',
fontSize:'150%'
},
itemHeight:8,
itemGap:2,
},
tooltip: {},
dataset: {
source: [
['product', 'XXX', 'XX', 'X', 'XXXX'],
res.biw,
res.chassis,
res.glass
]
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontSize:'150%',
},
},
},
yAxis: {
min:50,
minInterval: 25,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontSize:'150%',
},
formatter:'{value}%'
},
},
series: [
{
type: 'bar',
barGap: 0,
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '50%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' , //字体大小
},
formatter:'{@[1]}%'
},
color:'rgba(249,113,60,0.4)'
}
}
},
{ type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '30%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[2]}%'
},
color:'rgba(179,228,161,0.4)'
},
}
},
{ type: 'bar' ,
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '50%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[3]}%'
},
color:'rgba(238,197,102,0.4)'
}
}
},
{ type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '30%'],
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[4]}%'
},
color:'rgba(135,206,235,0.4)'
}
}
},
],
grid:{
top:'5%',
left:'9%',
right:'0px',
bottom:'30%'
}
});
window.addEventListener('resize',function (){echarts.init(document.getElementById('cmm')).resize()})
}
})
两种情况如下图:



2022年08月27日 23点08分
1
提问:如何使图表异步加载后立即自适应
如下为相关代码
var chartDom = document.getElementById('cmm');
var myChart_cmm = echarts.init(chartDom);
$.ajax({
url: "{% url 'cmmdatas' %}",
type:"GET",
async:true,
success:function (res){
console.log(res)
myChart_cmm.setOption({
backgroundColor: 'rgba(128, 128, 128, 0.1)',
legend: {
top: '85%',
textStyle:{
color:'#fff',
fontSize:'150%'
},
itemHeight:8,
itemGap:2,
},
tooltip: {},
dataset: {
source: [
['product', 'XXX', 'XX', 'X', 'XXXX'],
res.biw,
res.chassis,
res.glass
]
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontSize:'150%',
},
},
},
yAxis: {
min:50,
minInterval: 25,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontSize:'150%',
},
formatter:'{value}%'
},
},
series: [
{
type: 'bar',
barGap: 0,
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '50%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' , //字体大小
},
formatter:'{@[1]}%'
},
color:'rgba(249,113,60,0.4)'
}
}
},
{ type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '30%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[2]}%'
},
color:'rgba(179,228,161,0.4)'
},
}
},
{ type: 'bar' ,
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '50%'], //数值在中部显示
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[3]}%'
},
color:'rgba(238,197,102,0.4)'
}
}
},
{ type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示数值
position: ['1%', '30%'],
textStyle: { //数值样式
color: 'rgba(255,255,255,0.7)', //字体颜色
fontSize: '150%' //字体大小
},
formatter:'{@[4]}%'
},
color:'rgba(135,206,235,0.4)'
}
}
},
],
grid:{
top:'5%',
left:'9%',
right:'0px',
bottom:'30%'
}
});
window.addEventListener('resize',function (){echarts.init(document.getElementById('cmm')).resize()})
}
})
两种情况如下图:


