微信小程序使用Echarts

1.下载小程序版echarts文件http://文件地址：https://github.com/ecomfe/echarts-for-weixin/tree/master

2.将下载的文件放入小程序根目录下

 

3.项目文件引入

 

4.使用

echarts.wxml (使用请忽略<mp-tabs>标签)

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

<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected">
  <view slot="tab-content-0">
    <view class="line">
      <ec-canvas id="line" canvas-id="line" ec="{{ec}}"></ec-canvas>
    </view>
  </view>

  <view class="tab-content" slot="tab-content-1">
    <view class="line">
      <ec-canvas id="bar" canvas-id="bar" ec="{{ec}}"></ec-canvas>
    </view>
  </view>

</mp-tabs>

echarts.js

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

Page({
  data: {
    ec: { lazyLoad: true },
    tabs: [{ title: "折线图" }, { title: "柱形图" }],
    activeTab: 0,
    data1: [
      { label: "周一", value: 150 },
      { label: "周二", value: 230 },
      { label: "周三", value: 224 },
      { label: "周四", value: 218 },
      { label: "周五", value: 135 },
      { label: "周六", value: 117 },
      { label: "周日", value: 260 },
    ]

  },
  onLoad() {
    let line = this.selectComponent('#line')
    let pie = this.selectComponent("#pie")
    let bar = this.selectComponent("#bar")
    this.initEcharts(line, this.data.data1, 'line')
    this.initEcharts(pie, this.data.data1, 'pie')
    this.initEcharts(bar, this.data.data1, "bar")
  },
  setOptionLine(chart, data = []) {
    let label = []
    let value = []
    label = data.map(i => i.label)
    value = data.map(i => i.value)
    let option = {
      xAxis: { type: 'category', data: label },
      yAxis: { type: 'value' },
      series: [
        { data: value, type: 'line' },
      ]
    }
    chart.setOption(option);
  },
  setOptionPie(chart, data = []) {
    let datas = data.map((i) => {
      return { name: i.label, value: i.value }
    })
    let option = {
      title: { text: "数量占比", left: "center" },
      tooltip: { trigger: 'item' },
      legend: {
        top: '5%',
        left: 'left',
        top: "center",
        show: true,
        orient: "vertical"
      },
      series: [
        {
          name: '星期',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: { show: false, position: 'center' },
          emphasis: {
            label: { show: true, fontSize: 30, }
          },
          labelLine: { show: false },
          data: datas
        }
      ]
    };
    chart.setOption(option);
  },
  setOptionBar(chart, data = []) {
    let label = []
    let value = []
    label = data.map(i => i.label)
    value = data.map(i => i.value)
    let option = {
      xAxis: { type: 'category', data: label },
      yAxis: { type: 'value' },
      series: [
        { data: value, type: 'bar' }
      ]
    };
    chart.setOption(option);
  },
  initEcharts(e, data, type) {
    e.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      })
      switch (type) {
        case 'line':
          this.setOptionLine(chart, data)
          break;
        case 'pie':
          this.setOptionPie(chart, data)
          break;
        case 'bar':
          this.setOptionBar(chart, data)
          break;
      }
      return chart
    })
  },
  onTabCLick(e) {
    const index = e.detail.index
    this.setData({ activeTab: index })
  },

  onChange(e) {
    const index = e.detail.index
    this.setData({ activeTab: index })
  },


  onPullDownRefresh() { },

})

 echarts.wxss

/* 定义容器大小 */
.pie{
  width: 100%;
  height: 600rpx;
}
.line{
  width: 100%;
  height: 500rpx;
}
/* 组件大小与父元素保持一致 */
ec-canvas{
  width: 100%;
  height: 600rpx;
}

5.效果