echarts图使用tab和下拉切换

最新推荐文章于 2024-04-25 14:40:40 发布

chde2Wang

最新推荐文章于 2024-04-25 14:40:40 发布

阅读量2.9k

点赞数

分类专栏： echart

echart 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方法一：用tab建切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="echarts.js"></script>
    <style>
        .btns input{
            width:100px;
            height: 40px;
            background-color: #ddd;
            border: 0;
        }
        .btns .current{
            background-color: gold;
        }

        .cons .active{
            display: block;
        }
        .tab1{
            width: 500px;
            height: 300px;
        }
 
        .none {
            display: none;
        }
    </style>
    <script>
        $(function () {
            var $btn = $('.btns input');
            var $div = $('.cons div');
            $btn.click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                $('.cons .item').eq($(this).index()).addClass('active').siblings('.item').removeClass('active');
            })
        })

    </script>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>
    <div class="cons">
        <div  class="clearfloat item none active">
            <div id="tab1" class="tab1"></div>
        </div>
        <div class="clearfloat item none">
            <div id="tab2" class="tab1"></div>
        </div>
        <div class="clearfloat item none">
            <div id="tab3" class="tab1"></div>
        </div>
    </div>
<script type="text/javascript">
    (function () {
        var myChart1 = echarts.init(document.getElementById('tab1'));

        var option1 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'

            },
            series: [{
                data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],
                type: 'line'
            }]
            };

        // 为echarts对象加载数据
        myChart1.setOption(option1);
        var myChart2 = echarts.init(document.getElementById('tab2'));

        var option2 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
        myChart2.setOption(option2);
        var myChart3 = echarts.init(document.getElementById('tab3'));

        var option3 = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]};
        myChart3.setOption(option3);
    })()
</script>
</body>
</html>

效果：

在这里插入图片描述

方法二：利用下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="echarts.js" type="text/javascript" ></script>
    <script>
      $(function(){
          var li = $('#tabs');
          var cc=$('#tabs option');
          var len=cc.length;
          li.change(function(){
              var t = parseInt(li.get(0).selectedIndex);
              for(var i= 0;i<len;i++){
                  if(t==i){
                      $('#chanpin'+t).show();
                   }else{
                     $('#chanpin'+i).hide();
                   }
                }
          });
      });
    </script>
    <style>
        .selector{
            margin: 17px 15px 0 0 ;
            float: right;
        }
        #content .active{
            display: block;
        }
        .chart{
            width: 400px;
            height: 300px;
        }
        .none {
            display: none;
        }
    </style>
</head>
<body>
     <select name="status" id="tabs" class="selector">
         <!--<option>ALL</option>-->
         <option>表1</option>
        <option>表2</option>
        <option>表3</option>
    </select>
    <div id="content">
        <div id ="chanpin0" class="none active">
            <div id ="main1" class="chart" ></div>
            <!--我们是共产主义接班人！！-->
        </div>

        <div id ="chanpin1" class="none">
        　　<div id ="main2" class="chart" ></div>
        </div>

        <div id ="chanpin2" class="none">
        　　<div id ="main3" class="chart" ></div>
        </div>

    </div>



<script type="text/javascript">
    (function () {
        var myChart1 = echarts.init(document.getElementById('main1'));
        var option1 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'

            },
            series: [{
                data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],
                type: 'line'
            }]
            };

        // 为echarts对象加载数据
        myChart1.setOption(option1);
        var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
        myChart2.setOption(option2);
        var myChart3 = echarts.init(document.getElementById('main3'));
        var option3 = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]};
        myChart3.setOption(option3);
    })()
</script>
</body>
</html>

效果图：

参考自https://blog.csdn.net/luoyangxa/article/details/83510501

当在切换时有的时候第二图不会正常显示，是因为echarts不能识别到你设置的百分比宽度

解决方案一：设置成固定宽度

解决方案二：https://www.zhihu.com/question/42895113

（还没有试）

解决方案三：

在html文件加载时就给main1，main2，main3设置宽度为父div的宽度（也可以增减30左右的像素）

chde2Wang

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
echarts图使用tab和下拉切换

方法一：用tab建切换&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript&
复制链接

扫一扫