improve-echarts饼图自适应(分辨率放大缩小)
1.echarts
本身存在放大缩小图表不变的情况,要求要图表适应分辨率,根据分辨率放大缩小来进行适应与响应式。
(图片来源网络,侵删)
饼图
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}
{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(); }); },
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...