1.echarts

????????本身存在放大縮小圖表不變的情況，要求要圖表適應分辨率，根據分辨率放大縮小來進行適應與響應式。

餅圖

   <!-- 餅狀 --><div class="leftrcyle"><div class="ciclye"><div id="cicly" class="ye" ref="chart"></div></div></div>

import * as echarts from 'echarts'

  methods: {setci(data,index) {// 有的話就獲取已有echarts實例的DOM節點let myChart = echarts.getInstanceByDom(document.getElementById("cicly"))// 如果不存在，就進行初始化if (myChart == null || myChart == undefined || myChart == '') {myChart = echarts.init(document.getElementById("cicly"));}var option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},series: [{name: 'xxx',type: 'pie',radius: '90%',label: {show: true,position: 'inside',formatter: '{d}%',fontSize: 14},itemStyle: {borderColor: '#fff',borderWidth: 5},emphasis: {label: {show: true,},},data: data,},],}myChart.setOption(option)}},

2.核心主要的響應適應代碼

mounted() {this.chartInstance = echarts.init(this.$refs.chart);window.addEventListener('resize', () => {this.chartInstance.resize();});},