ECharts 文本和图例区域选项如何响应不同的屏幕尺寸？

Question

在这种情况下，我将 ECharts 用于 React 库，以使用饼图可视化数据。 当屏幕尺寸增加时，图形文本将保持相同尺寸。 canvas 大小在变化，但其他文本没有变化。

所以，我想让那些文本和图例区域在屏幕尺寸增加时响应。

const optionPieChart = { color: [ '#2B6AA9', '#2845AB', '#F8FAFF', '#4EBDDE' ], title: { text: 'Conversation Type', left: 'left', top: '10%', padding: 15, textStyle: { color: '#ffffff', opacity: '0.7', fontWeight: '400', fontFamily: 'poppins', fontSize: '18px' } }, tooltip: { trigger: 'item' }, legend: { itemGap: 10, show: true, padding: 15, orient: 'vertical', left: 'left', top: '50%', itemWidth: 15, textStyle: { color: '#C4D8FF', fontFamily: 'poppins', fontSize: '14px' } }, series: [ { // name: 'Access From', type: 'pie', radius: '80%', padding: '0', left: '160', data: [ { value: 1048, name: 'FAQs' }, { value: 735, name: 'Small Talks' }, { value: 580, name: 'Product inquiries' }, { value: 484, name: 'Escalate Hop' }, ], label: { show: false }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], backgroundColor: { type: 'radial', x: 0.3, y: 0.3, r: 0.8, colorStops: [ { offset: 0, color: '#122C44' }, { offset: 1, color: '#133351' } ] }, };

我尝试了一些媒体采石场，但没有奏效。

Answer 1

您可以使用 window.onresize 事件执行此操作

var chartEl = echarts.init(document.getElementById('someId'));
var option = {
  ... // chart options
};
chartEl.setOption(option);

window.onresize = function () {
  var width = document.getElementById('someId').offsetWidth;
  var fontSize = width / 80 + 'px';
  var legendWidth = width / 4 + 'px';
  
  chartEl.setOption({
    textStyle: {
      fontSize: fontSize
    }
  });
  
 chartEl.setOption({
    legend: {
      width: legendWidth
    }
  });
};