小程式開發-mpvue中使用圖表庫

LucaLJX發表於2018-09-11
Vue

wx-f2效果

圖表庫

在開發中使用圖表庫，推薦百度的 Echarts，和阿里出品的 AntV家族，其中移動端為 AntV-F2

這裡antV-F2有現成的原生小程式使用教程（wx-f2：wx-f2），就不做贅述，只講解如何在mpvue框架中使用。

mpvue框架中使用 Echarts

參考文件： mpvue-echarts

  • 安裝 mpvue-echarts 及 echarts 外掛
## mpvue-echarts
npm i mpvue-echarts --save
## echarts
npm i echarts --save
複製程式碼
  • vue檔案中以元件的形式使用
<template>
  <div class="echarts-wrap">
    <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
  </div>
</template>

<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

let chart = null;

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {}; // ECharts 配置項

  chart.setOption(option);

  return chart; // 返回 chart 後可以自動繫結觸控操作
}

export default {
  components: {
    mpvueEcharts
  },
  data () {
    return {
      echarts,
      onInit: initChart
    }
  }
}
</script>

<style scoped>
.echarts-wrap {
  width: 100%;
  height: 300px;
}
</style>
複製程式碼

mpvue框架中使用antV-F2

antV-F2官方給出了小程式原生的使用方式，並無vue相關的依賴外掛，所以我們把小程式原生外掛放在 ** “static” ** 資料夾中進行使用

注意：這裡不能放在"src"目錄下，防止被webpack工具打包

wx-f2中看 ff-canvas 原始碼可以看出. vue檔案data內部的opts.onInit 是一個 function 不能被傳遞到元件上, 通過主動呼叫 ff-canvas元件 的 init 方法, 並且將initChart傳入就即正常使用了

  • 將wx-f2對應的匯入專案static資料夾中

static資料夾

  • 專案src目錄下pages.js以小程式的方式引入wx-f2元件配置
module.exports = [
 {
   path: 'pages/testF2/index', // 頁面路徑，同時是 vue 檔案相對於 src 的路徑
   config: {
     // 引入使用wx-f2元件
     usingComponents: {
       'ff-canvas': '/static/libs/f2-canvas/f2-canvas'
     }
   }
 },
 {
   path: 'packageA/logs',
   subPackage: true,
   config: { // 頁面配置，即 page.json 的內容
     navigationBarTitleText: '檢視啟動日誌'
   }
 }
]
複製程式碼
  • vue檔案中使用

** 注意：mpvue中使用必須以懶載入的形式使用，即主動觸發渲染，否則會失敗 **

<!-- demo -->
<template>
  <div style="height: 100vh">
    <!-- opts 前面加冒號 -->
    <ff-canvas id="column" canvas-id="column" :opts="opts" />
  </div>
</template>

<script>
  // 這裡注意路徑，要引入 static 資料夾中的f2.js檔案
  import F2 from "../../../static/f2-canvas/lib/f2";

  let chart = null;

  function initChart(canvas, width, height) {
    // 使用 F2 繪製圖表
    const data = [{
        year: "1951 年",
        sales: 38
      },
      {
        year: "1952 年",
        sales: 52
      },
      {
        year: "1956 年",
        sales: 61
      },
      {
        year: "1957 年",
        sales: 145
      },
      {
        year: "1958 年",
        sales: 48
      },
      {
        year: "1959 年",
        sales: 38
      },
      {
        year: "1960 年",
        sales: 38
      },
      {
        year: "1962 年",
        sales: 38
      }
    ];
    chart = new F2.Chart({
      el: canvas, 
      width,
      height
    });

    chart.source(data, {
      sales: {
        tickCount: 5
      }
    });
    chart.tooltip({
      showItemMarker: false,
      onShow(ev) {
        const {
          items
        } = ev;
        items[0].name = null;
        items[0].name = items[0].title;
        items[0].value = "¥ " + items[0].value;
      }
    });
    chart.interval().position("year*sales");
    chart.render();
    return chart;
  }

  export default {
    data() {
      return {
        motto: "Hello World",
        opts: {
          // 使用延時初始化 -- 重要
          lazyLoad: true
        }
      };
    },

    components: {},

    methods: {

    },

    onLoad() {
      // 在 onLoad 內部通過id找到該元件, 然後呼叫該元件的初始化方法
      this.$mp.page.selectComponent('#column').init(initChart)
    }
  };
</script>

<style scoped>
</style>
複製程式碼

注意：

  1. 建議 ‘ this.$mp.page.selectComponent('#column').init(initChart) ’ 這行程式碼寫在vue生命週期mounted裡面，而不是小程式onLoad裡面，因為vue頁面載入在小程式後面

  2. wx-f2中的tooltip失效，並未使用成功，後續待解決（touch事件繫結成功，但對應的圖表效果沒有）

-- LucaLJX: github:https://github.com/LucaLJX

相關文章