起飞从菜鸟开始 2022-09-13 16:16 采纳率: 50%
浏览 113
已结题

eCharts中柱状图文本标签重叠

eCharts中柱状图文本标签重叠

img

运行结果及报错内容
想要知道dataZoom缩放组件的监听函数怎么写
能够根据缩放来决定文本标签的文字大小
  • 写回答

8条回答 默认 最新

  • web修理工 2022-09-20 18:31
    关注
    获得5.00元问题酬金 
    

<!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>
    评论
  • 浪客 2022-09-13 16:23
    关注

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

    评论
  • 一只成序源 2022-09-13 16:24
    关注

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

    评论 编辑记录
  • 小巷陌影(xxmoying) 2022-09-13 17:15
    关注

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

    img

    评论
  • 孙叫兽 前端领域优质创作者 2022-09-13 20:28
    关注

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

    评论
  • qu19666 2022-09-13 23:40
    关注

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

    评论
  • 西城十七妹 2022-09-15 17:40
    关注

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

    评论
  • 爱音斯坦牛 全栈领域优质创作者 2022-09-19 21:12
    关注
    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

    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 9月21日
  • 赞助了问题酬金10元 9月13日
  • 创建了问题 9月13日

悬赏问题

  • ¥20 python 3des pyDes库
  • ¥15 关于#mysql#安装失败的问题。MySQL
  • ¥15 想问一下for循环计算表达式的方法，第一次接触
  • ¥15 如何在VA框架上面加功能，去读取框架内任何app数据功能
  • ¥15 关于#c语言#的问题：用c或c++写一个计算下列问题有关软件工程的代码并加上分析
  • ¥15 Zeppelin0.10.0版本升级lib包下的shiro-web
  • ¥15 链表入队的指针内存问题
  • ¥20 vba如何写本地html文件执行js
  • ¥15 VS2022的C#如何创建
  • ¥20 关于#用户注册#的问题，如何解决？