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

雷蒙德

我真的没有问题，只是在这里分享我的知识。

这是一个关于如何在echarts.js中根据div大小自动缩放字体大小的知识分享。

雷蒙德

let myChart = echarts.init(document.getElementById('myChart'));

function autoFontSize() {
  let width = document.getElementById('myChart').offsetWidth;
  console.log(width);  
  return (width>=700) ? '50' : '' + width / 11;
};

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。