如上圖所示，在放大/縮小瀏覽器屏幕時，echarts圖可以自適應。
實現代碼：
1.html:
<div class="tps">
<p>TPS</p>
<div class="tps_charts">
<v-chart ref="runTimes_creditChart" class="credit-chart" :style="{width:'100%',height: '160px',}" :options="tps_options"></v-chart>
</div>
</div>
<div class="transactions">
<div class="transactions_field">
<p>交易總數：<span>122</span></p>
<p>注入交易：<span>100</span></p>
<p>修改交易：<span>20</span></p>
<p>流轉交易：<span>2</span></p>
</div>
<div class="transactions_charts">
<v-chart ref="transactions_creditChart" class="credit-chart" :style="{width:'100%',height: '180px'}" :options="transactions_options"></v-chart>
</div>
</div>
<div class="registers">
<div class="registers_field">
<p>注冊總數：<span>122</span></p>
<p>安順項目：<span>22</span></p>
<p>光大項目：<span>100</span></p>
</div>
<div class="registers_charts">
<v-chart ref="registers_creditChart" class="credit-chart" :style="{width:'100%',height: '180px',}" :options="registers_options"></v-chart>
</div>
</div>
使用了v-chart來插入echarts圖，在頁面中有三個echarts圖，均要自適應。
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
if (this.$refs.transactions_creditChart) {
this.$refs.transactions_creditChart.resize();
}
if (this.$refs.registers_creditChart) {
this.$refs.registers_creditChart.resize();
}
},
}
2.options:
tps_options : {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '業務指標',
type: 'gauge',
// center: ['50%', '45%'],
detail: {
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#ffffff'
},
borderRadius: 3,
backgroundColor: '#5576f6',
// width: 100,
offsetCenter: ['5%', '90%'], // x, y，單位px
formatter:'{value}/s'
},
data: [
{
value: 50,
}
],
itemStyle:{//指針樣式
color: '#fc572b',
},
pointer: {
width:3,//指針的寬度
length:"80%", //指針長度，按照半圓半徑的百分比
shadowColor : '#ccc', //默認透明
shadowBlur: 5
},
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐標軸文字顏色
fontSize : 10 //更改坐標軸文字大小
}
},
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 6,
color: [[0.2, '#5576f6'], [0.8, '#5576f6'], [1, '#5576f6']]
},
},
axisTick: { // 坐標軸小標記
length:10, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto',
}
},
splitLine: { // 分隔線
length:20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto',
width: 4,
}
},
}
]
},
transactions_options: {
tooltip: {
trigger: 'item',
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
// center: ['60%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:122,
name: '交易總數',
itemStyle: { color: '#15c4e3' }
},
{
value:100,
name: '注入交易',
itemStyle: { color: '#5576f6' }
},
{
value:20,
name: '修改交易',
itemStyle: { color: '#fc572b' }
},
{
value:2,
name: '流轉交易',
itemStyle: { color: '#f99928' }
},
]
}
]
},
registers_options: {
tooltip: {
trigger: 'item',
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
// center: ['60%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:122,
name: '注冊總數',
itemStyle: { color: '#15c4e3' }
},
{
value:22,
name: '安順項目',
itemStyle: { color: '#fc572b' }
},
{
value:100,
name: '光大項目',
itemStyle: { color: '#12d6a1' }
},
]
}
]
},
此時，基本上就可以了，
注意：
1.需要在main.js中引入：
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('v-chart', ECharts)
安裝依賴：
npm install vue-echarts
2.需要對三個v-echart的ref="runTimes_creditChart" 設置不同的值，然后在方法中對對應的進行處理，若是設置為同一個值，在方法中只進行一次設置，則只有最后一個會自適應，其他的不會。
ok，就這些就可以了。