zoukankan      html  css  js  c++  java
  • Echarts 实现tooltip自动显示自动播放

    1.其实这个很容易实现,一个 dispatchAction 方法就解决问题;但是博主在未实现该功能时是花了大力气,各种百度,各种搜;

    很难找到简单粗暴的例子,大多数随便回一句你的问题就没下文;

    废话太多了...

    上图片

    上代码

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    html,
    body {
    100%;
    height: 100%;
    background-color: gray;
    }

    #myChart {
    80%;
    height: 70%;
    position: fixed;
    top: 15%;
    left: 10%;
    }
    </style>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(function() {
    var XIdx = [];
    var data = [54, 86, 46, 45, 77, 96, 89, 88, 23, 38,
    3, 66, 98, 43, 73, 76, 44, 16, 21, 14,
    71, 8, 61, 65, 1, 68, 33, 69, 49, 24
    ];

    for(var i = 1; i <= data.length; i++) {
    XIdx.push(i);
    }

    var option = {
    backgroundColor: 'white',
    grid: {
    top: 20,
    left: 20,
    right: 20,
    bottom: 20,
    containLabel: true //轴上的数值
    },
    xAxis: {
    type: 'category',
    data: XIdx
    },
    yAxis: {
    type: 'value'
    },
    tooltip: {
    trigger: 'axis'
    },
    series: [{
    name: '人',
    type: 'line',
    data: data
    }]
    };
    var myChart = echarts.init(document.getElementById("myChart"));
    myChart.setOption(option);

    var index = 0; //播放所在下标
    var mTime = setInterval(function() {
    myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: index
    });
    index++;
    if(index > data.length) {
    index = 0;
    }
    }, 1000);
    });
    </script>
    </head>

    <body>
    <div id="myChart"></div>
    </body>

    </html>

    注意:dispatchAction 方法是关联到 option的tooltip项,在option里一定要配置tooltip
    原文链接:https://blog.csdn.net/LZY_1993/article/details/78630805

  • 相关阅读:
    yarn 国内加速,修改镜像源
    Gradle Wrapper 介绍
    使用 Gradle 快速创建 Java 项目
    Gradle 安装
    gradle 国内加速,修改镜像源
    maven 国内加速,修改镜像源
    java如何对map进行排序详解(map集合的使用)
    Java8 Collections.sort()及Arrays.sort()中Lambda表达式及增强版Comparator的使用
    给定字符串正整数,进行排序并返回排序后字符串
    Linux学习118 nginx与php结合实现web网站及优化
  • 原文地址:https://www.cnblogs.com/chenqingbin/p/11805961.html
Copyright © 2011-2022 走看看