eCharts中柱状图文本标签重叠

运行结果及报错内容

想要知道dataZoom缩放组件的监听函数怎么写

能够根据缩放来决定文本标签的文字大小



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Echarts实现心电图效果</title>
    <script src="https://cdn.bootcss.com/echarts/5.3.3/echarts.js"></script>
</head>

<body>
    <div id="totalFlowRate" style="height:300px;"></div>
</body>
<script type="text/javascript">
    var totalFlowRate = echarts.init(document.getElementById('totalFlowRate'));
    var  rate=1;
    var option = {

        xAxis: {
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {},
        dataZoom: [{
            type: "inside"         //详细配置可见echarts官网
        }],
        series: [{
            name: "Sale",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 4],
            label: {
                show: true,
                position: "top",
                fontSize: 18 ,
                color: '#ff0'
            }
        }]
    };
    totalFlowRate.setOption(option);
    totalFlowRate.on('datazoom', function (params) {
        console.log(params);

        rate = params.batch[0].end / (params.batch[0].end - params.batch[0].start)
        option.series[0].label.fontSize=18*rate
        console.log(rate, '****---', option)
        totalFlowRate.setOption(option);
    });
</script>

</html>

https://echarts.apache.org/zh/api.html#events.datazoom

myChart.on('datazoom', function (params) {
console.log(params);
});
监听改变后就好办了，根据改变的值去调整就行了

可以用这种方式：https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation

这个可以把字体修改小一点，柱状图调整大一些，官网有这个属性值，或者w3c

调整字体大小呀，这个是可以修改的，也可以调柱状图之间的间距

1、调整间距
2、调整字体大小
3、换中方式显示字体

var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option={｝
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

window.addEventListener("resize",function (){
    myChart.resize();
 ｝）

试试onsize能不能改变字体大小，不行的话，参照官网属性，把字体整个都调小吧！可以看看下面这篇博客的解决方案
https://blog.csdn.net/MFWSCQ/article/details/102522944