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

本文主要是介绍echarts图表标题，层级，view表格，机型适配，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

1. 父元素设置：position: relative

2. 子元素设置：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;  
}

这篇关于echarts图表标题，层级，view表格，机型适配的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！