微信小程序使用echarts

Apache Echarts 已经支持微信小程序了。个人觉得 是国内最好用的 图表工具了。

使用方法:

1、下载 echarts 相关文件，传送门: echarts-for-weixin

直接 clone 项目，找到 ec-canvas 文件 ，把这个文件复制到小程序项目中

2、 创建一个 page页面，引入使用

图表案例: link

把 option 直接复制过来就可以了

JS:

import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录
function initChart(canvas, width, height, dpr) { // 这部分是固定的不需要 是通用的
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  // 这是 唯一需要更改的，可根据实际情况api更改图标
  // 我这边测试的是一个 普通的折线图,案例网址:
  var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

JSON:

{
  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas",
    "left-head":"../../components/left-head/index"
  }
}

WXML:

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

WXSS 非常重要 ，不然显示不出来:

/**index.wxss**/
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;
} 
.picker-pos{
  margin-top: -130rpx;
  margin-left: 150rpx;
  color: blueviolet
}

效果图: