如何在echarts中自动缩放字体大小？

Question

I don't really have a question but just to share my knowledge here.

This is a knowledge sharing on how to auto scale font size in echarts.js based on the div size.

Answer 1

 let myChart = echarts.init(document.getElementById('myChart')); function autoFontSize() { let width = document.getElementById('myChart').offsetWidth; let newFontSize = Math.round(width / 11); console.log(`Current width : ${width}, Updating Fontsize to ${newFontSize}`); return newFontSize; }; const fruits = [{ value: 100, name: "Apple(s)" }, { value: 200, name: "Banana(s)" } ]; const sum = fruits.reduce(function(prev, current) { return prev + current.value }, 0); let myChartOption = { grid: { left: 0, top: 0, right: 0, bottom: 0 }, tooltip: { trigger: 'item', textStyle: { fontSize: '15', }, formatter: 'You have {c} {b}' }, legend: { orient: 'vertical', x: 'right', y: 'bottom', padding: 0, itemGap: 0, textStyle: { fontSize: '15', }, formatter: function(name) { var targetValue = 0; fruits.forEach(function(c) { if (c.name == name) { targetValue = c.value; } }); return targetValue + ' ' + name; } }, series: [{ name: 'fruits', type: 'pie', center: ['50%', '40%'], radius: ['50%', '60%'], avoidLabelOverlap: false, label: { position: 'center', textStyle: { fontSize: autoFontSize(), fontWeight: 'bold' }, color: 'black', formatter: '' + sum, }, labelLine: { normal: { show: false } }, data: fruits, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; myChart.setOption(myChartOption); $(window).on('resize', function() { if (myChart != null && myChart != undefined) { myChart.resize({ width: 'auto', height: 'auto' }); myChart.setOption({ series: { label: { textStyle: { fontSize: autoFontSize() } } } }) } });

 #myChart { width: 100%; min-height: 330px; margin: 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script> <div id="myChart"></div>