體驗(yàn)示例小程序（本文只選擇了折線圖）

在微信中掃描下面的二維碼即可體驗(yàn) ECharts Demo：

WXecharts.jpeg

第一步 下載并引入

說到統(tǒng)計圖，大家都會想到echarts等框架鹰溜，但是echarts官網(wǎng)沒有小程序的版本虽填，不過已經(jīng)有大佬在github發(fā)布echarts的小程序版本了。感謝大佬２芏Ｕ铡！

首先仁期，下載 GitHub 上的 ecomfe/echarts-for-weixin 項(xiàng)目桑驱。
在項(xiàng)目中 ec-canvas 是大佬提供的組件，可以直接選擇引入該組件到項(xiàng)目中
由于ec-canvas/echarts.js文件過大跛蛋，項(xiàng)目中不需要各式各樣的統(tǒng)計圖熬的。可以去Echarts官網(wǎng)選擇在線定制去自由選擇所需圖表赊级、坐標(biāo)系押框、組件進(jìn)行打包下載。

ec-canvas.png

第二步 小程序的折線圖demo

1.首先是在pages文件夾下面新建index文件夾理逊，里面對應(yīng)的index.js橡伞、index.json、index.wxml晋被、index.wxss

index.wxml

<view class="index">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

index.json

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

index.wxss

.index{
  width: 100%;
  height: 100vh;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

index.js

devicePixelRatio ==> 解決echarts統(tǒng)計圖模糊問題

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

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 解決小程序視圖模糊的問題兑徘，必寫
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '折線圖',
      left: 'left'   // 設(shè)置標(biāo)題位置
    },
    legend: {
      data: ['A', 'B', 'C'],
      top: 0,  // 設(shè)置legend位置
      left: 'right',  // 設(shè)置legend位置
      backgroundColor: 'red',  // 設(shè)置legend背景顏色
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    // 包換多條折線圖
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

最終效果圖

echarts.png