微信小程序使用echarts的踩坑记

1)微信小程序显示词云

在微信小程序中目前不能直接使用echarts-wordcloud.js
这里写图片描述
echarts-wordcloud.js中使用了window对象,所以会报找不到对象的错

解决方案:
1)研究echarts-wordcloud.js源码,使用canvas自己绘
2)后端生成图片,小程序显示图片

2)微信小程序echarts图表无法使用toolbox

toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },

echarts中的这些设置在小程序无法使用

解决方案:自己写功能按钮和图表关联

3)图表在页面上的层级最高,所以如果使用蒙版,必须隐藏图表
这里写图片描述

<testChart :showChart.sync="openModal" wx:if="{{openModal !=true}}" />

使用wx:if隐藏图表后,关闭蒙版,图表不会再显示,需要使用动态传参的方式让图表重新显示

watch = {
    showChart (newValue, oldValue) {
      if (!newValue) {
        this.option.series = [...]
        chart.setOption(this.option)
      }
    }
  }

猜你喜欢

转载自blog.csdn.net/qq_35790269/article/details/82428196