当前位置：首页 > article >正文

echarts图表标题，层级，view表格，机型适配

article 2024/11/20 4:47:48

1.主标题和副标题在同一行上

在副标题当中设置itemGap:0

 title: 
      [{
          text: '',
          left: 'left',
          textStyle: {
              fontSize: adjustSize(0.7),
              fontWeight: 400,color:'#333',
          }
      }
  ,{
    subtext: '',
    left: 'right',itemGap: 0, 
    subtextStyle: { //设置字体样
        fontSize: adjustSize(0.7),
        fontFamily: 'sans-serif',color:'#333',
    } 
  }],

下面是更全的title相关属性

title:{
    //1.标题居中
    //left的值为'left', 'center', 'right'
    left:'center',
    //默认为10
    //2.主副标题之间的间距
    itemGap:20,
    3.标题文本样式   
     text:'标题文本',
     textStyle:{
        //文字颜色
        color:'#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle:'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight:'bold',
        //字体系列
        fontFamily:'sans-serif',
        //字体大小
　　　　 fontSize:18
    }
    //4.副标题
    subtext:'副标题',
　　//副标题文本样式
　　subtextStyle:{},
   //5.grid组件离容器左侧的距离。
   // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也            
   可以是 'left', 'center', 'right'。
   //如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
   left:'center'  
}

2.echarts图表和二维表

最近遇到了一个问题，需求是echarts图表和二维表在同一个界面

因为echarts图表的层级是很高的，导致二维表和echarts图表不在一个界面，网上看到了hidden隐藏的方法（这种情况适用于echars图表层级太高，导致微信原生小程序的选择框被覆盖等情况），

2.1隐藏

隐藏方法用到的是父子组件，子组件给父组件传值需要用到方法，父组件给子组件传值使用properties。

首先在子组件当中的methods方法当中，一些方法里面。调用 this.triggerEvent("sendMonthVisible", { monthVisible:true});

// 打开年月选择器
        showTimePicker(e) {
            const { mode } = e.currentTarget.dataset;
            this.setData({
                mode,
                [`${mode}Visible`]: true,
            });
            this.triggerEvent("sendMonthVisible", { monthVisible:true});
        },

然后再父组件当中的wxml，绑定，sendMonthVisible方法。<DateAndArea bind:sendDateAndArea="getDateAndArea" bind:sendMonthVisible="getMonthVisible" initData="{{initData}}" />

然后再父组件当中，写对应的方法。

  getMonthVisible(e){
      if(e.detail.monthVisible){
        this.setData({
          echartsShow:false 
        })//改变wxml当中，echarts图表的显示
      }else{
        this.setData({
          echartsShow:true 
        })
        // this.MapInit();
      }
    },

在wxml当中，为每一个view设置了hidden="{{!echartsShow}}" ,当monthVisible为true的时候，隐藏图表，为false的时候，显示图表。

<DateAndArea bind:sendDateAndArea="getDateAndArea"  bind:sendMonthVisible="getMonthVisible" initData="{{initData}}" />
<view class="chartArea">
  <view class="FChart" hidden="{{!echartsShow}}">
    <ec-canvas id="myCanvas" ec="{{ dtmap }}"  canvas-id="myCanvas"></ec-canvas>
    <button size="mini" class="chart-button" hidden="{{!isButtonVisible}}" bindtap="handleRefresh" id='myElement'>返回</button> 
  </view>

如果是有请求的图表初始化，不需要定时器。如果没有请求的需要加定时器。

//dom节点出现需要时间，延迟一下重新渲染图片。
      setTimeout(() => {
        tongBIOption.title[1].subtext = that.data.searchObj.year;
        that.indicatorAnaylize();  
      }, 1000);

2.2zlevel:-1

错的，因为echarts图表层级是最高的

2.3force-use-old-canvas=false

虽然echarts会降级，但是带来的隐形问题就是反应慢，图表模糊

2.4cover-view不起作用

不知道是不是自己没用对

2.5是wx开发者工具的bug

2.6问题解决

我偶然发现了将二维表置于两个echarts图表当中，可以实现，但是他会有一个小bug，就是当下滑条触碰到底部时，二维表会自动向前移动一小段。造成了二维表和echarts图表中间间隔很大。最后我给父容器设置了position:relative，和echarts图表子容器设置了position:absolute（子绝父相）。就可以解决这个问题。

但是随即我发现二维表在两个echarts图表当中并不符合业务需求。所以我将二维表放在最后一个的时候，在这个二维表后面添加了颜色和父容器背景颜色一致的echarts图表。最终完成了我的需求。

相关链接：微信小程序中canvas、echarts层级太高，z-index，cover-view无效问题 - 简书

小程序中echarts因为小程序原生的canvas层级太高，而导致弹窗这类dom元素无法遮挡住canvashttps://www.cnblogs.com/elevens/p/14848521.html

总结：在绝大多数情况下，子元素的绝对定位都是相对于父元素定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标。常用的解决方案

父元素设置：position: relative
子元素设置：position: absolute

3.使用微信小程序利用view来做一个表格

/**index.wxss**/

/*整个表格*/
.table{
  font-size: 15px;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
/*设置行*/
.tr {
  width: 100%;
  display: flex;
  /*垂直居中*/
  align-items: center;
  /*水平居中*/
  justify-content: center;
  height: 3rem;
}
/*设置所有单元格*/
.th,.td{
   width: 40%;
  /*文字居中*/
  text-align: center;
  /*垂直居中*/
  align-items: center;
  /*水平居中*/
  justify-content: center;
  /*和上面.tr的height对应，数值修改一样就可*/
  height: 3rem;
}
/*设置表格边框的边框，不想麻烦所以所有的边框都在这里写了，可以自己修改*/
.tr,.th,.td,.table{
  border: 1rpx solid blue;
}
/*标题单元格*/
.th {
  display: flex;
  background: red;
  color: yellow;
  font-size: large;
}
/*文字单元格*/
.td{
  padding-top: 50rpx;
  background:gray;
}

4.在iphone机型上面显示正常的图表，在ipad上面显示不正常

可以通过给grid设置百分比来进行优化，字体的调整可以通过下面这个adjustSize()函数。

grid: {
    x: '20%',
    y: '25%',
    x2: '5%',
    y2: '15%', 
  },

//根据屏幕大小，动态调整字体大小
function adjustSize(res) {  
  // 获取系统信息，同步方法  
  const systemInfo = wx.getSystemInfoSync();  
  let screenWidth = systemInfo.screenWidth; // 获取屏幕宽度  
  // 如果屏幕宽度为0（理论上不会发生，但为了安全起见检查）  
  if (!screenWidth) {  
    return res; // 或者返回一个默认值  
  }  
  // 计算调整因子  
  let adjustSize = 100 * (screenWidth / 1920);  
  // 返回调整后的值  
  return res * adjustSize;  
}

查看全文

http://www.kler.cn/a/291541.html