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="{'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="{'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="{'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',
                            //  100,
                            offsetCenter: ['5%', '90%'], // x, y，单位px
                            formatter:'{value}/s'
                        },
                        data: [
                            {
                                value: 50,
                            }
                        ],
                        itemStyle:{//指针样式
                            color: '#fc572b',
                        },
                        pointer: {
                            3,//指针的宽度
                            length:"80%", //指针长度，按照半圆半径的百分比
                            shadowColor : '#ccc', //默认透明
                            shadowBlur: 5
                        },
                        axisLabel: {
                            show: true,
                                textStyle: {
                                color: '#333333',  //更改坐标轴文字颜色
                                fontSize : 10   //更改坐标轴文字大小
                            }
                        },
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                 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',
                                 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，就这些就可以了。