1. 程式人生 > >微信小程式使用echarts的踩坑記

微信小程式使用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)
      }
    }
  }