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

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

image.png

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>
阅读 974
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题