在微信小程序中如何使用ECharts 避免踩坑

在微信小程序中如何使用ECharts。坑已踩完，放心參考。

ECharts官網–5分鐘上手ECharts
ECharts 團隊聯合微信小程序團隊合作，提供了ECharts的小程序版本。開發者可以通過平常的組件開發配置那樣去使用ECharts進行開發，高效的實現數據可視化。
一、如何下載ECharts。，以及下載後的目錄分析。
ECharts下載鏈接
下載後echarts-for-weixin-master文件夾裏主要了解ec-canvas文件夾，這個文件夾相當於是一個組件，ECharts的組件，因此前面我說着就這平常小程序使用組件一樣。
我們到時候導入ECharts只需要導入這個文件夾（組件）即可。其他文件就是微信小程序的基本目錄，或者說是ec-canvas組件的示例。
我們下載的echarts-for-weixin-master其實就是一個小程序，這個小程序其實就是ECharts在小程序中應用的demo，因此我建議使用開發者工具打開，模仿pages\bar下的例子去學習ECharts在小程序中的應用。
二、導入ECharts及案例演示
第一步，將ec-canvas組件（通俗理解爲是文件夾，我們專業點後面就只說組件了）導入到你小程序的根目錄下。如圖所示：

第二步，在你的.json文件裏允許使用該組件。代碼如下：

{
  "usingComponents": {
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }
}

只注意，這裏的路徑要寫對。寫你項目中該組件的相對路徑

第三步，在.wxml文件中使用該組件，爲該組件準備一個容器，代碼如下：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

這裏面的ec其實就是ECharts在微信小程序定義的一個對象，就像我們寫js代碼一樣，我們經常會var或者new一個對象來存儲或者代表某些特殊的數據或函數。

第四步，在.js文件中寫入如下代碼。

import * as echarts from '../../../ec-canvas/echarts';

let chart = null;

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

  var option = {
    color: ['#37a2da', '#32c5e9', '#67e0e3'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 座標軸指示器，座標軸觸發有效
        type: 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['熱度', '正面', '負面']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['汽車之家', '今日頭條', '百度貼吧', '一點資訊', '微信', '微博', '知乎'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '熱度',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310],
        itemStyle: {
          // emphasis: {
          //   color: '#37a2da'
          // }
        }
      },
      {
        name: '正面',
        type: 'bar',
        stack: '總量',
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220],
        itemStyle: {
          // emphasis: {
          //   color: '#32c5e9'
          // }
        }
      },
      {
        name: '負面',
        type: 'bar',
        stack: '總量',
        label: {
          normal: {
            show: true,
            position: 'left'
          }
        },
        data: [-20, -32, -21, -34, -90, -130, -110],
        itemStyle: {
          // emphasis: {
          //   color: '#67e0e3'
          // }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: 'pages/root/message/message',
      success: function () { },
      fail: function () { }
    }
  },
  /**
   * 頁面的初始數據
   */
  data: {
    ec: {
      onInit: initChart
    }
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    setTimeout(function () {
      // 獲取 chart 實例的方式
      console.log(chart)
    }, 2000);
  },

這裏我們解析一下這段js的結構。
我們先提出一個適合所有ECharts 圖表都通用的結構，如下

let chart = null;

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

  var option = {
   // ……
  };

  chart.setOption(option);
  return chart;
}
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    ec: {
      onInit: initChart
    }
  },

這個結構是所有ECharts 圖表都通用的，只要往option 裏填數據就得了。具體怎麼填數據，參考ECharts 官網上的例子或你下載的ECharts微信完整版（echarts-for-weixin-master）中的/pages目錄下的例子。

第五步，在css文件中寫人樣式。
代碼如下：

ec-canvas {
  width: 100%;
  height: 100%;
}

這裏有一個坑，其實代碼寫到這裏也就寫完了，這是官方demo，但是當你運行你會發現頁面不顯現，什麼內容都沒有。我找好久的問題，明明是官方demo卻不得，百思不得其解。後來去百度才知道，原來是css的問題。完整的css是這樣的：

ec-canvas {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

這裏如果沒有用css給定限制，就會無法顯示。麻瓜吧~哈哈哈

三、效果圖

文章到這裏就結束了，如果有幫助到你，請幫點個贊。熬夜寫博客不容易，謝謝啦~