mpvue使用echarts

mpvue使用echarts

在mpvue中開發小程式中，mpvue官方出了一套适用于mpvue使用的eecharts，叫mpvue-echarts；

值得一提的是，原生小程式使用的是echarts-for-weixin，具體位址如下：

https://github.com/ecomfe/echarts-for-weixin

1.mpvue-echarts的github位址

https://github.com/F-loat/mpvue-echarts

首先安裝

npm install mpvue-echarts
npm install echarts
其次頁面使用

import * as echarts from "echarts/dist/echarts.min";
import mpvueEcharts from "mpvue-echarts";
然後具體繪制

<mpvue-echarts :echarts="echarts" :onInit="ecBarInit_0" canvasId="bar0" />
 在data裡聲明

ecBarInit_0: function(canvas, width, height) {
        barChart_0 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barChart_0);
        barChart_0.setOption(options_0);
        // console.log("barChart_0", barChart_0);
        return barChart_0;
      },
接下來

options_0 = {
        series: [
          {
            type: "graph", // 系列類型:關系圖
            top: "10%", // 圖表距離容器頂部的距離
            // roam: true,             // 是否開啟滑鼠縮放和平移漫遊。預設不開啟。如果隻想要開啟縮放或者平移，可以設定成 'scale' 或者 'move'。設定成 true 為都開啟
            // focusNodeAdjacency: true, // 是否在滑鼠移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。[ default: false ]
            force: {
              // 力引導布局相關的配置項，力引導布局是模拟彈簧電荷模型在每兩個節點之間添加一個斥力，每條邊的兩個節點之間添加一個引力，每次疊代節點會在各個斥力和引力的作用下移動位置，多次疊代後節點會靜止在一個受力平衡的位置，達到整個模型的能量最小化。
              // 力引導布局的結果有良好的對稱性和局部聚合性，也比較美觀。
              repulsion: 1000, // [ default: 50 ]節點之間的斥力因子(關系對象之間的距離)。支援設定成數組表達斥力的範圍，此時不同大小的值會線性映射到不同的斥力。值越大則斥力越大
              edgeLength: [150, 100], // [ default: 30 ]邊的兩個節點之間的距離(關系對象連接配接線兩端對象的距離,會根據關系對象值得大小來判斷距離的大小)，
              // 這個距離也會受 repulsion。支援設定成數組表達邊長的範圍，此時不同大小的值會線性映射到不同的長度。值越小則長度越長。如下示例:
              // 值最大的邊長度會趨向于 10，值最小的邊長度會趨向于 50      edgeLength: [10, 50]
              layoutAnimation: false
            },
            layout: "force", // 圖的布局。[ default: 'none' ]
            // 'none' 不采用任何布局，使用節點中提供的 x， y 作為節點的位置。
            // 'circular' 采用環形布局;'force' 采用力引導布局.
            // 标記的圖形
            //symbol: "path://M19.300,3.300 L253.300,3.300 C262.136,3.300 269.300,10.463 269.300,19.300 L269.300,21.300 C269.300,30.137 262.136,37.300 253.300,37.300 L19.300,37.300 C10.463,37.300 3.300,30.137 3.300,21.300 L3.300,19.300 C3.300,10.463 10.463,3.300 19.300,3.300 Z",
            symbol: "circle",
            lineStyle: {
              // 關系邊的公用線條樣式。其中 lineStyle.color 支援設定為'source'或者'target'特殊值，此時邊會自動取源節點或目标節點的顔色作為自己的顔色。
              normal: {
                color: "#FF7801", // 線的顔色[ default: '#aaa' ]
                width: 2, // 線寬[ default: 1 ]
                type: "solid", // 線的類型[ default: solid ]   'dashed'    'dotted'
                opacity: 0.5, // 圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。[ default: 0.5 ]
                curveness: 0 // 邊的曲度，支援從 0 到 1 的值，值越大曲度越大。[ default: 0 ]
              }
            },
            label: {
              // 關系對象上的标簽
              normal: {
                show: true, // 是否顯示标簽
                position: "inside", // 标簽位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                textStyle: {
                  // 文本樣式
                  fontSize: 16
                }
              }
            },
            edgeLabel: {
              // 連接配接兩個關系對象的線上的标簽
              // normal: {
              //   show: true,
              //   textStyle: {
              //     fontSize: 14
              //   },
              //   formatter: function(param) {
              //     // 标簽内容
              //     return param.data.category;
              //   }
              // }
            },
            data: value,
            // categories: [
            //   {
            //     // 節點分類的類目，可選。如果節點有分類的話可以通過 data[i].category 指定每個節點的類目，類目的樣式會被應用到節點樣式上。圖例也可以基于categories名字展現和篩選。
            //     name: "收入支出分析" // 類目名稱，用于和 legend 對應以及格式化 tooltip 的内容。
            //   },
            //   {
            //     name: "收入+"
            //   },
            //   {
            //     name: "支出-"
            //   },
            //   {
            //     name: "支出-"
            //   },
            //   {
            //     name: "剩餘="
            //   }
            // ],
            links: links
          }
        ]
      };
這些都是預設的申明，具體的計算是需要實際資料。 

最後

放到onLoad周期裡。

注：在mpvue 裡，vue的生命周期和小程式的生命周期可以換着用的。