星空2020 2023-02-08 20:46 采纳率: 64.1%
浏览 149
已结题

echarts柱状图的柱子如何向上或者向下自动滚动播放?

如下echarts柱状图如何实现柱子逐个逐个自动向上或者向下滚动,柱子数量60个。

img


//echart_2
    function echart_2() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_2'));
        
        option = {
                    title: {
                        //text:'',
                        x:'center',//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
                        textStyle: {
                            //fontSize:14,//标题字号
                            //fontWeight: "normal",
                        }
                    },
                    grid:{
                      show:false,
                      top:'20%',
                      right:'10%',
                      bottom:'18%',
                      left:'10%'
                  },
                    tooltip: {trigger: 'axis'},
                    /* legend: {
                        show: true,
                        top:"10%",//与上方的距离 可百分比% 可像素px
                        data:['Repair2nd','OncePassRate','Target'],
                        textStyle: {color: '#FFFFFF'},
                    }, */
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: false},
                            saveAsImage : {show: false}
                        }
                    },
                    calculable : true,
                    yAxis: {
                        type: 'category',                        
                        data: [],
                        axisLabel:{
                            inside: true,
                            interval:0,//横轴信息全部显示
                            //rotate:30,//-30度角倾斜显示
                            zlevel:1,
                            color:'#fff',
                            //textStyle:{color:'#fff'},
                        }
                    },
                                        dataZoom: [
                {
                    yAxisIndex: 0,// 这里是从X轴的0刻度开始
                    show: true, // 是否显示滑动条,不影响使用
                    type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    startValue: 0, // 从头开始。
                    endValue: 10, // 一次性展示多少个。
                },
              ],
                    xAxis:[
                        {
                            type: 'value',
                            show: true,
                            //max: '12000',
                            splitLine:{
                                show:false//隐藏网格线
                            },
                            axisLabel: {
                                textStyle:{color:'#fff'},
                            }
                        },
                    ],
                      
                            series: [
                            {
                                name: 'TE',
                                zlevel: -1, // 层级
                                type: 'bar', 
                                barWidth: 30, // 内柱条的宽度
                                // animationDuration: 1500, // 内柱条的动画显示时间
                                showBackground: true,
                                // 内柱条样式
                                itemStyle: {                                    
                                    normal: {
                                        color: '#2596FF',
                                    label: {
                                        show: true,
                                        color:'#fff',
                                        position: 'right',
                                        }
                                },
                                
                                    },// 内柱条的数据
                                    align: 'center'
                                    },
                                    ],
                    };
                //获取数据
                myChart.showLoading({
                    text:'正在加载中......',
                    color: '#c23531', //显示转圈的圆圈颜色
                    textCloor: '#000', //显示文本的颜色
                    maskColor: 'rgba(255,255,255,0.8)', //显示的背景色 
                    fontSize: 12,// 字体大小。从 `v4.8.0` 开始支持。
                    showSpinner: true,// 是否显示旋转动画(spinner)。从 `v4.8.0` 开始支持。
                    spinnerRadius: 10,// 旋转动画(spinner)的半径。从 `v4.8.0` 开始支持。
                    lineWidth: 5,// 旋转动画(spinner)的线宽。从 `v4.8.0` 开始支持。
                    fontWeight: 'normal',// 字体粗细。从 `v5.0.1` 开始支持。
                    fontStyle: 'normal',// 字体风格。从 `v5.0.1` 开始支持。
                    fontFamily: 'sans-serif' // 字体系列。从 `v5.0.1` 开始支持。
                });
                //数据加载完之前先显示一段简单的loading动画
                $.getJSON("./echarts_data.php",function(data11){
                    var d=data11.list;
                    var xlist=[];
                    var nanlist=[];
                    
                    for(var i=0;i<d.length;i++){
                        xlist.push(d[i].Month)
                        nanlist.push(d[i].TE)
                    }
                    
                    myChart.hideLoading();    //隐藏加载动画
                    
                    myChart.setOption({
                        yAxis: {
                            data:xlist
                        },
                        series: [
                        {
                            // 根据名字对应到相应的系列
                            name: 'TE',
                            data:nanlist
                        },
                                ]
                    });
                });
        

if (option && typeof option === 'object') {
                myChart.setOption(option);
                // 定时自动滚动
                setInterval(function(){
                    if (option.dataZoom[0].endValue == data.length ) {
                      option.dataZoom[0].endValue = 5;
                      option.dataZoom[0].startValue = 0;
                    } else {
                      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                    }
                    myChart.setOption(option);
                }, 2000)
            }
    }
  • 写回答

4条回答 默认 最新

  • ZionHH 2023-02-09 10:53
    关注

    默认显示5条,通过定时器执行删除首位,追加下一位,改变数据再渲染到echarts中。

    img

    <!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>Document</title>
      <style>
        #chart {
          width: 400px;
          height: 320px;
        }
      </style>
    </head>
    <body>
      <div id="chart"></div>
      <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
      <script>
        const result = [
          { name: 'A', value: 123 },
          { name: 'B', value: 323 },
          { name: 'C', value: 233 },
          { name: 'D', value: 244 },
          { name: 'E', value: 123 },
          { name: 'F', value: 443 },
          { name: 'G', value: 454 },
          { name: 'H', value: 653 },
          { name: 'I', value: 231 },
          { name: 'J', value: 434 },
        ]
        let num = 5
        let data = result.slice(0, num)
        let yData = data.map(item => item.name)
        let seriesData = data.map(item => item)
    
        const chart = echarts.init(document.getElementById('chart'))
        chart.setOption({
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: yData
          },
          series: [
            {
              type: 'bar',
              data
            }
          ]
        })
        setInterval(() => {
          if (num < result.length) {
            num++
            data.shift()
            const nextOne = result[num - 1]
            data.push(nextOne)
            yData.shift()
            yData.push(nextOne.name)
            chart.setOption({
              yAxis: {
                data: yData
              },
              series: [
                {
                  data
                }
              ]
            })
          } else {
            num = 0
          }
        }, 1000)
      </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 修改了问题 2月9日
  • 创建了问题 2月8日

悬赏问题

  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题
  • ¥15 代码问题:df = pd.read_excel('c:\User\18343\Desktop\wpsdata.xlxs')路径读不到
  • ¥15 为什么视频算法现在全是动作识别?
  • ¥15 编写一段matlab代码
  • ¥15 用Python做岩石类别鉴定软件
  • ¥15 关于调取、提交更新数据库记录的问题
  • ¥15 之前删了盘从下vs2022遇见这个问题 搞了一整天了
  • ¥15 从Freecad中宏下载的DesignSPHysics,出现如下问题是什么原因导致的(语言-python)