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