1.效果
2.关键点
window.addEventListener('resize', function () {
bar.resize();
});
3.完整代码例子
drawbar(myecharts) {
let bar = echarts.init(document.getElementById(myecharts));
document.getElementById(myecharts).setAttribute("_echarts_instance_", "");
let option = {
// backgroundColor:"#000a3f",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(9, 24, 48, 0.5)',
borderColor: 'rgba(75, 253, 238, 0.4)',
textStyle: {
color: '#CFE3FC',
},
borderWidth: 1,
},
grid: {
top: '15%',
right: '8%',
left: "8%",
bottom: '15%'
},
xAxis: [{
name: "月份",
type: 'category',
data: ["一月", "二月", "三月", "四月", "五月"],
axisLine: {
lineStyle: {
color: '#00000'
}
},
axisLabel: {
margin: 10,
color: '#000000',
textStyle: {
fontSize: 12
},
},
axisTick: {
show: false
}
}],
yAxis: [{
name: "入园(人数)",
axisLabel: {
formatter: '{value}',
color: '#000000',
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#000000'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
data: [2000, 1520, 1850, 3400, 2756],
radius: ['10%', '40%'],
center: ['40%', '50%'],
barWidth: '30%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0FCA7A' // 0% 处的颜色
}, {
offset: 1,
color: '#0FCA7A' // 100% 处的颜色
}], false),
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 10,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#00D6F9',
fontSize: 12
}
}
}
}]
};
//关键在这里
window.addEventListener('resize', function () {
bar.resize();
});
bar.setOption(option);
},