小程序 - ECharts，画出好看的图表

简介

• 为了兼容小程序 Canvas，ECharts官方提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。该项目是ECharts微信小程序版本，包含小程序组件和使用的示例。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。
• ec-canvas 是ECharts提供的组件，其他文件是如何使用该组件的示例。
• ec-canvas 目录下有一个 echarts.js，可以自行从 ECharts 项目中下载最新发布版。默认的echarts.js文件较大，可以从官网自定义构建以减小文件大小。

备注

• 小程序版ECharts项目地址
• ECharts官网地址
• ECharts在线定制
• ECharts教程
• 图表的配置项和数据案例

示例

1. 使用微信开发工具创建项目，在 pages目录下新建index文件夹并添加文件，可点击右键选择“新建Page”：index.js、 index.json、 index.wxml、 index.wxss。在 app.json 的 pages 中增加 ‘pages/index/index’，如果使用快捷方式可自动填写。
2. 拷贝ECharts项目ec-canvas文件到项目。
3. 配置index.json，引入ec-canvas组件。

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

4. index.html内容如下。

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

5. index.js结构如下，我们只需要修改 option 的内容，即可改变图表。。

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

const app = getApp();

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

  var option = {
    title: {
      text: '测试下面legend的红色区域不应被裁剪',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      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({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

1. 图表显示如下。
   

常见问题

1. [JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。
   ec-canvas/echarts.js
   答：由于echarts.js体积过大，即使经过UglifyJS 压缩仍旧大于500KB，所以微信开发工具会给出以上警告。但开发者不用太过在意，这并不会影响程序的正常运行，可自行忽略。如果有强迫症的话，可以前往官网在线定制以减少echarts.js大小。
2. 当我们运行官方的案例，你可能会发现图表并没有显示出来，怎么回事？
   答：我们来检查一下。有语法错误吗吗？没有。组件参数是不是指定了？是的。option是不是设置了数据？是啊。组件长宽设置了吗？已经接近正确答案了。怎么回事？只能在网上找找找，找了半天也不见得有答案。
   细心的小年轻可能会发现，其实官方已经给了我们提示。
   此时我的心里，只能冒出一句，“傻逼！！！”，回头爆头痛苦。
   
   参考：
   https://github.com/ecomfe/echarts-for-weixin

OK，终于可以开心画出好看的图表了！！！