uni-app 下使用ECharts

關鍵詞：uni-app；ECharts；

認知尚淺，如有高見，願聞其詳。

 

  前言：本次的教程與上次的基於WePY 2.x平台下使用ECharts方式基本一致，畢竟目標平台都是微信小程序而已（別的平台未測試），只是就是多了一個參數而已。

  本次使用的是仍然是echarts-for-weixin組件，其對小程序進行了兼容適配，我們進行直接下載項目的組件文件，然后引入就能使用了。其次，還有一種方式，就是去uni-app插件市場進行echarts搜索，是有人已經做了適配的，同樣是在此項目的基礎上改的，只不過他的方式是通過ec參數傳入options，進行數據賦值。廢話不多說，開干。

 

步驟

1. 先下載開源項目echarts-for-weixin，把開源項目中ec-canvas文件夾中的文件拷到自己的項目中（千萬別下Release，好像還是老版本....）

2. 對引入組件中的ec-canvas.js文件進行一點點的修改（重要）

   本步驟主要是為了解決引入后使用中點擊無效果與echart初始化問題，具體問題於文章底部詳述。

3. 在需要在pages.json下的globalStyle引入ec-canvas組件

   ①-全局引入ec-canvas組件，用於承載統計圖表

    "globalStyle": {
     ...
     "usingComponents": {//引入全局ec-canvas組件
     	"ec-canvas": "/static/plugin/echart/ec-canvas"//根據自己放的路徑改變
     }
    },
   

4. 進行Page或Component下的 template節點構建以及style樣式引入，

   ①-構建節點

   <template>
     <view class="container">
       <view class="main">
         <ec-canvas
           id="month-trend-bar-dom"
           class="month-trend"
           canvas-id="month-trend-bar"
           @init="echartBarInit"
           :ec="ec"
         >
         </ec-canvas>
       </view>
     </view>
   </template>
   

   ②-引入樣式    注意修改lang，本教程中使用的是scss

   <style lang="scss">
   .container{
     margin-top: 30px;
     min-height: 100%;
     .main{
       width: 750rpx;
       .month-trend{
         display: block;
         width: 750rpx;
         height: 500rpx;
       }
     }
   }
   </style>
   

5. 聲明data中的ec以及定義echartBarInit初始化方法

   ①-聲明 ec

   data: {
       // 有需要的可進行一些配置
       ec: {
       }
   },
   

   ②-定義echarts初始胡方法echartBarInit

   methods: {
       echartBarInit({ detail }) {
         // 初始化方法
         this.initChart(
           detail.echart,//ec-canvas傳回的echart參數
           detail.canvas,
           detail.width,
           detail.height,
           detail.dpr,
           detail.wxNode//ec-canvas傳回的this
         );
       },
       initChart(echart, canvas, width, height, dpr, wxNode) {
         let chart = echart.init(canvas, null, {//進行chart初始化
           width: width,
           height: height,
           devicePixelRatio: dpr,
         });
         canvas.setChart(chart);
         var option = {
           color: [
             "#37A2DA",
             "#32C5E9",
             "#67E0E3",
             "#91F2DE",
             "#FFDB5C",
             "#FF9F7F",
           ],
           legend: {
             data: ["直接訪問", "郵件營銷", "聯盟廣告"],
           },
           xAxis: [
             {
               type: "category",
               data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
               axisTick: {
                 alignWithLabel: true,
               },
             },
           ],
           yAxis: [
             {
               type: "value",
             },
           ],
           series: [
             {
               name: "直接訪問",
               type: "bar",
               barWidth: "60%",
               data: [10, 52, 200, 334, 390, 330, 220],
             },
             {
               name: "郵件營銷",
               type: "bar",
               stack: "總量",
               label: {
                 normal: {
                   show: true,
                   position: "insideRight",
                 },
               },
               data: [120, 132, 101, 134, 90, 230, 210],
             },
             {
               name: "聯盟廣告",
               type: "bar",
               stack: "總量",
               label: {
                 normal: {
                   show: true,
                   position: "insideRight",
                 },
               },
               data: [220, 182, 191, 234, 290, 330, 310],
             },
           ],
         };
         chart.setOption(option);//賦值option
         wxNode.chart = chart;//賦值ec-canvas中的chart參數，達到監聽效果實現
       },
     }
   

至此，整個教程已經結束了，不出問題，你就可以看到效果了。
完整代碼請移步至我的開源項目：Memoyu/mbill_wechat_app: 基於uni-app搭建個人記賬小程序

 

點擊無效果問題

請參考此文底部：WePY 2.x 下使用ECharts - Memoyu - 博客園 (cnblogs.com)

 

效果