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();});},