echarts动态排序柱状图学习笔记

最新推荐文章于 2024-04-15 16:42:15 发布

花开花落的博客

最新推荐文章于 2024-04-15 16:42:15 发布

阅读量4.3k

点赞数 2

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/weixin_42028153/article/details/119965325

版权

echarts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态排序柱状图</title>
    <script src="echarts-5.1.2.min.js"></script>
    <script src="jquery/js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="main" style="height: 400px;width: 600px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        var data=[];
        for(let i=0;i<5;++i){
            data.push(Math.round(Math.random()*200));
        }
        option ={
            xAxis:{
                max:'dataMax', //表示用数据的最大值作为X轴最大值，视觉效果更好
            },
            yAxis:{
                type:'category',
                data:['a','b','c','d','e'],
                inverse:true, //设为true表示Y轴 从下往上 是 从小到大 的排序

                
                animationDuration:300, //表示第一次柱条排序动画的时长为300

                
                animationDurationUpdate:300, //表示第一次后 柱条排序动画的时长为300
                max:2 //只显示最大的3条 ，不设置则显示所有柱条
            },
            series:[
                {
                    realtimeSort:true, //设为true表示开启Y轴的动态排序效果
                    name:'x',
                    type:'bar',
                    data:data,
                    label:{
                        show:true,
                        position:'right',
                        valueAnimation:true //如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true ??有待学习不明白
                    }
                }
            ],
            legend:{
                show:true
            },
            //animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
            animationDuration:0,

            //animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
            animationDurationUpdate:3000,

            AnimationEasing:'linear',
            AnimationEasingUpdate:'linear'
        };

        function run(){
            var data = option.series[0].data;
            for(var i=0;i<data.length;++i){
                if(Math.random() > 0.9){
                    data[i] += Math.round(Math.random() * 2000);
                }
                else{
                    data[i] += Math.round(Math.random() * 200);
                }
            }
            myChart.setOption(option);
        }

        setTimeout(function(){
            run();
        },0);

        //以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序
        setInterval(() => {
            run();
        }, 3000);

        option && myChart.setOption(option);
    </script> 
    
</script>
</body>
</html>

直接贴代码吧，照官网例子敲的，敲完发现出不来，也是醉了，寻思半天f12也不报错，结果犯了一个低级错误，没有设置echarts图容器，也就是页面上div的高宽，显示个毛线呀

另外需要注意animationDuration、animationDurationUpdate两个属性，在yAxis中可以设置表示的是柱条排序动画的时长，在series中也有此属性的设置，表示的内容含义不同，见代码注释

花开花落的博客

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
echarts动态排序柱状图学习笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态.
复制链接

扫一扫