最近項目要用到echarts畫圖儡率，踩了個自適應的坑，在這里總結一下谓形，首先看bug圖：
分析一下：左邊的盒子，也就準一等品花顏色得分情況沒有出來是因為我最外邊的盒子設置的固定寬旗们，如果設置固定寬 echarts是能夠自適應的，但是頁面會擠在一起构灸，也就是左邊 中間 右邊的盒子間隔會隨著瀏覽器窗口放大，放大的結果就是瀏覽器窗口寬度變小了岸梨，而盒子固定寬度不變喜颁，導致盒子會擠壓在一起，布局就不美觀了曹阔。所以為了自適應半开，我把盒子的寬都設成百分比了；
中間和右邊的div盒子我就是設置百分比寬赃份，這樣設置頁面是不會擠在一起了寂拆，但是echarts無法自適應，大小固定不變抓韩，導致圖形超出盒子纠永，也就是現(xiàn)在見到的樣子。
這里是解決方法：
1谒拴、前提：畫布外部的盒子寬和畫布的寬都需要設置百分比寬尝江，如果畫布還是設置了固定寬，即使加了方法還是不會自適應的
2英上、下面就是方法了
加我所注釋說明的那段代碼就行
效果：
現(xiàn)在就不會擠出去了炭序。
下面是寫的一個小demo，可以參考一下：
<template>
<div class="app">
<div id="data-rh-body" class="data-lf-top" ></div>
</div>
</template>
<script>
var echarts=require('echarts')
export default{
methods:{
drawChart2() {
// 基于準備好的dom苍日，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('data-rh-body'));
// 指定圖表的配置項和數(shù)據(jù)
let option = {
grid: {
//坐標系地板的定位
left:60,
bottom:50
},
xAxis: {
type: 'category', //類名軸
data: ['5', '6', '7','8','9','10'],
axisLine: {//坐標軸軸線相關設置
lineStyle: {
color: '#262571'//x軸線顏色設置
}
},
axisLabel: {// 坐標軸刻度標簽的相關設置
show: true,//控制顯隱
textStyle: {
color: '#6FCEFF',//x軸字體顏色
fontSize: 20 //
}
},
axisTick: {
//x軸刻度相關設置
show: false
}
},
yAxis: {
axisLine: {
//坐標軸軸線相關設置
lineStyle: {
color: '#262571'
}
},
axisLabel: {//坐標軸刻度標簽的相關設置
textStyle: {//y軸字體樣式設置
color: '#CFD4EB',
fontSize:20
}
},
axisTick: {
//y軸刻度相關設置
show: false
},
splitLine: {//坐標軸在 grid 區(qū)域中的分隔線相關設置
lineStyle: {//線的樣式設置
color: '#262571'
}
}
},
series: [
{
name: '數(shù)量',
type: 'bar',
data: [50, 125, 10,50,30,15],
barWidth: 28, //柱圖寬度
itemStyle: {//圖形樣式相關設置
normal: {
//自定義柱形漸變色
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#63FFFF' // 0% 處的顏色
},
{
offset: 1,
color: '#0054FF' // 100% 處的顏色
}
],
false
),
}
}
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表惭聂。
myChart.setOption(option);
window.addEventListener("resize", () => {
? ? ? if(myChart){
? myChart.resize()
? }
})
// window.onresize = myChart.resize;
},
},
mounted(){
this.drawChart2()
}
}
</script>
<style scoped>
.app{
width: 50%;
height: 500px;
background: #000000;
margin: auto;
}
#data-rh-body{
width: 100%;
height: 100%;
}
</style>
————————————————
版權聲明：本文為CSDN博主「聽聽那晚風」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議相恃，轉載請附上原文出處鏈接及本聲明辜纲。
原文鏈接：https://blog.csdn.net/GongWei_/article/details/107732516
