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;
}
