Echart设置柱状图轮流播放的js代码

最新推荐文章于 2024-09-21 14:09:22 发布

陈皮煮红豆

最新推荐文章于 2024-09-21 14:09:22 发布

阅读量717

点赞数

文章标签： Echart 基础

本文链接：https://blog.csdn.net/qq_41974246/article/details/92196503

版权

这个示例展示了如何使用Echarts库创建一个柱状图，并设置使其轮流播放，通过修改`timeline`参数来实现图表数据的切换，每个时间点对应一天的网页浏览数据。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    
    <script src="https://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
    <div id="main5" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main5'));
        var webdata={};
        webdata.daydata={
            7:[34,24,13,43,45,23,7,3,0,0,0,0,37,13,6,0,0,0],
            8:[39,0,10,7,34,13,0,3,0,0,0,0,0,0,0,0,0,0],
            9:[0,0,0,0,0,0,0,0,0,0,23,0,0,0,0,0,7,0],
            10:[40,0,0,0,20,0,0,0,45,16,2,0,0,10,0,143,45,13,0],
            11:[53,0,4,0,0,0,0,0,0,5,5,0,0,0,0,93,27,0,20],
            12:[73,0,0,0,0,0,0,6,7,3,3,0,0,0,0,77,3,0,7]
        };
        option={
            baseOption: {
                timeline: {
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 1500,
                    data: [
                        '7','8',
                        {
                            value: '9',
                            tooltip: {
                                formatter: '{ {b} 小组论文会议视频等相关资料阅读完毕'
                            },
                            symbol: 'diamond',
                            symbolSize: 16
                        },
                        '10', '11',
                        {
                            value: '12',
                            tooltip: {
                                //formatter: '{问题回答文档制作完成'
                            // form