echarts微信小程序组件

本项目是 Apache ECharts (incubating) 的微信小程序版本，以及使用的示例。

开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

github地址：https://github.com/ecomfe/echarts-for-weixin

体验示例小程序

组件介绍

ec-canvas是项目提供的组件，其他文件是如何使用该组件的示例。

ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

组件使用

1、拷贝ec-canvas到新项目中

2、创建图标展示页面:
/pages/bar/index.js
/pages/bar/index.json
/pages/bar/index.wxml
/pages/bar/index.wxss

/pages/bar/index.json
设置要使用的组件：<ec-canvas>

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

pages/bar/index.wxml

<view class="container">
  <!--创建<ec-canvas>组件--> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>  <!--ec是在index.js中定义的对象，它使得图表能够在页面加载后被初始化并设置-->  </view>

pages/bar/index.js

对于所有 ECharts 图表都是通用的，用户只需要修改下面 option 的内容，即可改变图表。

/**
 * @param canvas canvas对象
 * @param width  画布宽度
 * @param height 画布高度
 * @param dpr    画布像素比 
 */
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

option 的使用方法参见 ECharts 配置项文档。
地址：https://echarts.apache.org/zh/option.html