taro+react+ts+wx-charts canvas层级问题

小程序使用canvas画折线图出现层级问题

canvas 画折线图加弹框时，微信开发工具显示的页面正常，但是真机调试时发现折线图的层级太高

百度搜索了一番，看到回答说使用cover-view，试了一下确实可以,但是有限制

我的需求中有用到picker-view，所以cover-view这条路对我不通

百度过程中有看到小伙伴把canvas图转图片的思路，就试了下

思路
1.初始化时渲染canvas图
2.打开弹框前先通过Taro.canvasToTempFilePath转化为图片，获取到图片路径后赋值给变量radarImg
3.关闭弹框时将变量radarImg设为null,再重新渲染canvas

import { Component } from 'react'
import {View, Text, Canvas, Image} from "@tarojs/components";
import {AtIcon} from 'taro-ui';
import ChartsDataFilter from "../charts-data-filter";
import WxCharts from '../../utils/wxcharts-min';
import Taro from '@tarojs/taro';
import styles from './index.module.scss';

export default class ChartsData extends Component{
	state = {
	    visible:false,
	    radarImg:null,
	}
	
	// 初始化
	componentDidMount() {
	    this.canvasRender();
	}
	
	// 渲染折线图
  canvasRender = () =>{
    let windowWidth = 320;
    try {
    // 获取屏幕的宽度
      const res = Taro.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    new WxCharts({
      canvasId: 'myCanvas',
      type: 'line',
      categories: ['11-12 11:12', '11-12 11:13', '11-12 11:14', '11-12 11:15', '11-12 11:16', '11-12 11:17'],
      series: [{
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }],
      xAxis:{
        disableGrid:true,
      },
      yAxis: {
        format: function (val) {
          return val.toFixed(2);
        },
      },
      legend:false,
      width: windowWidth,
      height: 250,
    });
  }
  
  // 筛选弹框
  toFilter = () =>{
    this.handleCanvasToImage();
  }
	
  // 把canvas转为图片
  handleCanvasToImage = () =>{
    let windowWidth = 320;
    try {
      const res = Taro.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    Taro.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: windowWidth,
      height: 300,
      destHeight:300,
      destWidth:windowWidth,
      canvasId: 'myCanvas',   //对应canvas的id
      success: (res) => {
       // 转换图片成功后赋值给变量
        this.setState({radarImg: res.tempFilePath},()=>{
        // 弹框打开
          this.setState({ visible: true});
        })
      }
    });
  }

  // 筛选弹框回调
  onCallback = id =>{
    this.setState({ radarImg:null, visible : false , device_id : id},()=>{
      this.canvasRender();
    });
  }

  render() {
  const { dateSel , radarImg , visible} = this.state;
  	rerurn (
  	...
  	<View className={styles.filter_item} onClick={this.toFilter}>
        <Text className={styles.filter_text}>筛选</Text>
        <AtIcon value='filter' size='16' color='#b1b1b2' />
    </View>
  	<View style={{marginTop:'10px',height: '250px',width: '100%'}}>
  	 {/* 如果变量不为null，说明目前canvas是图片状态，此时显示图片 */}
       {
           radarImg ?
           <Image mode='scaleToFill' src={radarImg} style={{height:'250px',width:'100%'}} />
           :
           <Canvas canvas-id="myCanvas" style={{height:'250px',width:'100%'}} />
        }
     </View>

	{/* 筛选弹框 */}
    {
        visible &&
        <ChartsDataFilter onCallback={this.onCallback} device_id={device_id} />
    } 
     ...
  	)
  }
}

重新编译运行后测试发现效果好使

自己记录bug…