微信小程序中使用ECharts

快速到达官网：ECharts官方网址说明

ECharts相关JS文件导入项目

下载GitHub项目：ECharts官方给的GitHub项目

然后只需把ec-canvas文件夹放到你项目的pages同级目录

pages下4个文件引用与使用

下面是我工作中的某一个页面page
（需注意导入路径，我这page离根目录3层，所以是../../../ec-canvas/ec-canvas）

.json文件需用代码：
（注意导入路径）

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

.wxml文件需用代码:
（注意ec-canvas组件外层多套一个view后面css要用到）

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

.wxss文件需用代码:
（.ec-canvas样式的height要给实的高度，100%不会显示图表；外层的view要加个弹性布局display: flex，不然也不会显示图表）

ec-canvas {
  width: 90%;
  height: 600rpx;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.js文件需用代码:
（注意导入路径，Page下面的data要加上 ec: {onInit: initChart }参数，不然不会显示图表）

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

const app = getApp();

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

  var option = {
    xAxis: {
      type: 'category',
      data: ['我', '想', '谈', '个', '恋', '爱', '！']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  };

  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {

    ec: {
      onInit: initChart
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },
})

效果图：

接下来是怎么实现两个或多个ECharts图表

CSS
(我自定义两个ec类名为ec_height 和ec_weight )

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

JS
（JS部分我自定义方法分别为initChartHeight和initChartWeight， 另外Page下面的data需添加css定义的类名ec_height 和ec_weight，然后onInit的值为对应的方法名initChartHeight和initChartWeight）

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

const app = getApp();

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

  var option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ["出生", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      data: [0, 5, 10, 15, 20, 25, 30],
    },
    series: [{
      data: [14, 16, 17, 18, 20, 22, 24, 26, 27],
      type: 'line',
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: '#FFC1D1',
          width: 2,
          type: 'dashed'
        }

      }
    }]
  };

  chart.setOption(option);
  return chart;
}

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

  var option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ["出生", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      data: [0, 5, 10, 15, 20, 25, 30],
    },
    series: [{
      data: [14, 16, 17, 18, 20, 22, 24, 26, 27],
      type: 'line',
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: '#87E6F4',
          width: 2,
          type: 'dashed'
        }

      }
    }]
  };

  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec_height: {
      onInit: initChartHeight
    },
    ec_weight: {
      onInit: initChartWeight
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

})

效果图：