收藏
回答

canvas父级标签通过wx:if控制后,canvas不显示了?

canvas父级标签通过wx:if或hidden控制后,canvas不显示了?

import * as echarts from '../../components/ec-canvas/echarts';
var chart = null;
Page({
  data: {
    isModal: false,
    ec: {
      onInit: initChart
    },
    },
  showDetail: function (e) {
    const item = e.currentTarget.dataset.item;
    const index = e.currentTarget.dataset.index;
    item.grade = index + 1;
    this.setData({
      rankDetail: item,
      isModal: true
    });
    this._showChart()
  },


  _showChart: function () {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
      },
      yAxis: {
        type: 'value',
      },
      grid: {
        y: 0,
        left: 0,
        containLabel: true,
        bottom: 0,
        top: 10,
        right: 0
      },
      series: [
        {
          data: [120, 200, 150],
          type: 'bar',
          barWidth: '30%',
          barCategoryGap: '10%'
        }
      ]
    };
    chart.setOption(option);
  },
});

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  return chart;
};


<l-popup show="{{isModal}}" content-align="top" z-index="{{zIndex}}" bind:lintap="closeModal">
  <view class="popup">
    <view class="flex-column popup_ranking">
      <text class="popup_ranking_name">{{rankDetail.title}}</text>
      <text class="popup_ranking_title">傻B行为指数榜</text>
      <view class="flex-column popup_vote">
        <text>{{rankDetail.grade}}</text>
        <text>综合榜</text>
      </view>
    </view>
    <view class="flex-space canvas_case">
      <view class="canvas">
        <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
      </view>
      <view class="canvas_tital">
        <text class="tital_A">没做过</text>
        <text class="tital_B">偶尔做</text>
        <text class="tital_C">经常做</text>
      </view>
    </view>
    <button class="btn_detail" hover-class="btn_like" catchtap="toDetail">查看详情</button>
  </view>
</l-popup>
最后一次编辑于  2022-01-12
回答关注问题邀请回答
收藏

3 个回答

  • 游戏人生
    游戏人生
    2022-01-12

    是的,建议用hidden的办法隐藏,用if容易导致对象丢失

    2022-01-12
    有用 1
    回复
  • Charlie
    Charlie
    2022-01-12
    isModal
    

    值是什么

    2022-01-12
    有用
    回复 5
    • Qiu (吉²)
      Qiu (吉²)
      2022-01-12
      开始的时候是false,控制弹窗的。弹窗显示后为true。但是图表不显示
      2022-01-12
      回复
    • Charlie
      Charlie
      2022-01-12回复Qiu (吉²)
      不用hidden和if,直接显示在页面上,canvas会显示吗
      2022-01-12
      回复
    • Qiu (吉²)
      Qiu (吉²)
      2022-01-12回复Charlie
      会显示,我更新了一下帖子,把代码贴上了,帮忙看一下吧,谢谢🙏
      2022-01-12
      回复
    • Charlie
      Charlie
      2022-01-12回复Qiu (吉²)
      我猜测是_showChart比isModal: true先执行了
      2022-01-12
      回复
    • Qiu (吉²)
      Qiu (吉²)
      2022-01-12
      有可能,我试着改一下执行顺序
      2022-01-12
      回复
  • brave
    brave
    2022-01-12

    没看懂你的问题,这个表现不对?

    2022-01-12
    有用
    回复 4
    • Qiu (吉²)
      Qiu (吉²)
      2022-01-12
      在canvas的父级标签加上wx:if或hidden后,canvas就不能显示了。(<view hidden="{{!isModal}}" class="popup">)
      2022-01-12
      回复
    • brave
      brave
      2022-01-12回复Qiu (吉²)
      为什么会显示?
      2022-01-12
      回复
    • Qiu (吉²)
      Qiu (吉²)
      2022-01-12回复brave
      去掉wx:if或hidden就正常了。
      2022-01-12
      回复
    • Aurora
      Aurora
      2022-03-03回复Qiu (吉²)
      解决了吗?我也遇到同样的问题
      2022-03-03
      回复
登录 后发表内容