echart图表制作bug

1.min-width与min-height
min-width顾名思义就是最小宽度
在新版的浏览器内可用,在ie浏览器不能用数值表示。
举个使用的方法:

<div style="width:100%; height:20px; background:#f00; min-width:800px;"></div>

这个div是全屏的,浏览器不会产生滚动条,但是你把浏览器宽度缩小到800像素的时候,这个div不会再缩小,而浏览器就会产生滚动条(纵向)
这里写图片描述

这里写图片描述

2.点击切换隐藏
这里写图片描述
这里写图片描述
这里写图片描述

$(function(){
    var tmp,tmp0,tmp1;
    var timeid
    $(".arrow-left").click(function(){
        //获取某一类的样式
        tmp = $(".content0").attr("class");
        //如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组
        tmp0 = tmp.match(/hidden/);
        //如果样式存在并且样式为hidden
        if(tmp0  && tmp0[0] == "hidden"){
            $(".content0").removeClass("hidden");
            $(".content1").addClass("hidden");
            clearInterval(timeid)
        }else{
            $(".content1").removeClass("hidden");
            $(".content0").addClass("hidden");
            //右边按钮功能与左边按钮功能相同
            $(".arrow-right").click(function(){
        $(".arrow-left").click();
    })

match()用法
如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组。
这里写图片描述

$.each(results, function(index, domEle) {}

遍历处理data,可以是数组、DOM、json等,取决于直接给定或者ajax返回的类型
function (index, value)中index是当前元素的位置,value是值。

 // each处理一维数组
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });
  // 处理json数据,例如ajax的返回值     
  var obj = { one:1, two:2, three:3};      
 $.each(obj, function(key, val) {      
      alert(key); 
      alert(val); 
  });

3.input框
这里写图片描述

这里写图片描述

#header .search-part{
  position: relative;
  width: 17%;
  height: 26px;
  border: 1px solid #03FBFF;
  float: right;
  margin-top:25px;
}
.search-part img{
  position: absolute;
  right: 5px;
  top:10px;
}
#header .search-part input{
  height: 100%;
  width: 100%;
  line-height: 26px;
  color:#ffffff;
  text-indent: 14px;
  background:transparent;
}
#header .search-part ul{
  position: absolute;
  width: 101%;
  background-color: #ffffff;
  top:26px;
  left: -1px;
  display: none;
  z-index: 100;
}
#header .search-part:hover ul{
  display: block;
}
#header .search-part ul li{
  width: 100%;
  height: 25px;
  line-height: 25px;
  color: #404040;
  text-indent: 7px;
  cursor: pointer;
}
#header .search-part ul li:hover{
  color: #EDCF0A;
}
var tmpli;
    $(".search-part li").click(function(){
        tmpli = $(this).text();
        $(this).parent().siblings("input").val(tmpli);
    })

5.滚动条样式设计

/*滚动条 start*/  
      ::-webkit-scrollbar {  
        width: 5px;  
        height: 4px;  
        background-color: #F5F5F5;  
      }  
      /*定义滚动条轨道 内阴影+圆角*/  
      ::-webkit-scrollbar-track {  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
        background: #fff ;  
      }  
      /*定义滑块 内阴影+圆角*/  
      ::-webkit-scrollbar-thumb {  
        border-radius: 3px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color:#0f6286;  
      } 
/*根据屏幕分辨率大小 自适应字体*/
@media (min-width: 2px) {
  .title-size{
    font-size: 22px;
    /*width: 260px;*/
  }
  .fontSize1{
    font-size: 15px;
  }
  .fontSize2{
    font-size: 14px;
  }
  .fontSize3{
    font-size: 12px;
  }
  .num-size1{
    font-size: 18px;
    font-weight: Arial;
  }
}
@media (min-width: 1600px) {
  .title-size{
    font-size: 25px;
   /* width: 300px;*/
  }
  .fontSize1{
    font-size: 18px;
  }
  .fontSize2{
    font-size: 15px;
  }
  .fontSize3{
    font-size: 13px;
  }
  .num-size1{
    font-size: 22px;
    font-weight: Arial;
  }
}

6.html js 或者css怎么做到隐藏滚动条,但是依旧可以滚动?
法一:给你个思路。一个外部div里设置宽高设置overflow:hidden,然后里面插入一个div 设置
宽度width: 102%;height: 100%;overflow-x: hidden;overflow-y: auto;padding-right:30px;/*这个padding可以自己调整*/
然后在再插入的div里插入内容就可以了,这样滚动条就会超出视线范围而被隐藏了。

法二:::-webkit-scrollbar{width:0px}
目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效,依旧可以滚动。

法三:既然已经用了JS可以考虑另外一个方案
一个div固定高度,超出部分影藏,在嵌套一个DIV,这个div没有固定高度,然后用JS获取到鼠标在里面这个DIV高度的移动值,吧这个值给里面DIV做一个Y轴的移动,这样就没有滚动条显示,在鼠标移动的时候也会上下滚动

ECharts是一个功能强大的交互式图表和可视化库,用于在浏览器中创建各种类型的图表。它提供了丰富的图表类型和交互功能,可以帮助用户更好地展示和分析数据。ECharts支持的图表类型包括折线图、柱状图、散点图、饼图、雷达图、地图等。用户可以根据自己的需求选择合适的图表类型,并通过配置选项进行个性化设置,如调整颜色、样式、标签等。此外,ECharts还支持数据的动态更新和交互操作,用户可以通过鼠标滚动、拖拽、点击等方式与图表进行交互,实现数据的探索和展示。通过使用ECharts,用户可以轻松创建出美观、交互性强的图表,用于数据可视化和展示[^1]。 以下是一个使用ECharts创建柱状图的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First ECharts</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="myChart" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的 DOM,初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 指定图表的配置项和数据 var option = { title: { text: '柱状图示例' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这段代码创建了一个柱状图,横轴表示类别,纵轴表示销量。通过设置xAxis和yAxis的data属性和series的data属性,可以指定横轴和纵轴的数据。通过设置title属性,可以给图表添加标题。最后,使用myChart.setOption(option)方法将配置项应用到图表上,实现图表的展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值