微信小程序引入echart圖表

ECharts 和微信小程序官方團(tuán)隊(duì)合作，提供了 ECharts 的微信小程序版本，ECharts圖表技術(shù)在國內(nèi)應(yīng)該是最好的了，能結(jié)合到小程序應(yīng)用真的是極好。

準(zhǔn)備：小程序開發(fā)環(huán)境，下載ECharts組件，gitHub地址：ecomfe/echarts-for-weixin

要求小程序基礎(chǔ)庫：1.9.91（基本不用考慮版本兼容問題）

圖1-1-1

ec-canvas拷貝到項(xiàng)目根目錄。

對(duì)應(yīng)頁面json文件引入組件：

{
  "navigationBarTitleText": "客戶報(bào)表",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

對(duì)應(yīng)頁面js文件:

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = []
var list1 = []

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

  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['客戶']
    },
    grid: {
      left: '1%',
      right: '30rpx',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list,
      name: '月份',
      nameGap: 2,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      name:'數(shù)量'
    },
    series: [
      {
        name: '客戶',
        type: 'line',
        stack: '總量',
        data: list1
      }
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

對(duì)應(yīng)頁面wxml文件:

      <view class="recommend_hot_box">
        <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}">
        </ec-canvas>
      </view>

至此，ECharts圖表設(shè)置成功，option對(duì)象信息可以根據(jù)ECharts提供的文檔進(jìn)行設(shè)置，非常多。

圖2-1-1

文檔一層層對(duì)應(yīng)，很清晰，需要設(shè)置什么就找相應(yīng)的設(shè)置即可，option的設(shè)置和網(wǎng)頁都是一致的。

在開發(fā)的過程中，我需要線型圖表可以在小程序左右滑動(dòng)，一屏裝不下，demo提供了不阻塞滑動(dòng)，但只有開發(fā)工具上可以滑動(dòng)，放到真機(jī)就不能滑動(dòng)了，這個(gè)有點(diǎn)尷尬。有哪位大神解決這個(gè)圖表真機(jī)上可以滑動(dòng)的告知一下(抱拳)

圖3-1-1

復(fù)制鏈接加入群聊【開發(fā)交流】：https://jq.qq.com/?_wv=1027&k=5rHG16G