vue中使用v-chart時放大縮小屏幕，echarts圖自適應

 如上圖所示，在放大/縮小瀏覽器屏幕時，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' // 在 webpack 環境下指向 components/ECharts.vue
/* 引入echarts工具 */
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

Vue.component('v-chart', ECharts)

而後在須要使用v-chart的vue文件中引入echarts：

import echarts from 'echarts';

2.須要對三個v-echart的ref="runTimes_creditChart" 設置不一樣的值，而後在方法中對對應的進行處理，如果設置爲同一個值，在方法中只進行一次設置，則只有最後一個會自適應，其餘的不會。

 

ok，就這些就能夠了。