ec-canvas 在小程序上的使用（一）

I. 前言

echarts、ec-canvas，在小程序中进行数据可视化的意义

Echarts 是一款由百度开发和维护的的数据可视化工具库，其提供了各种类型的图表和交互式组件，同时支持动态数据更新和动画效果等功能。通过使用 Echarts，用户可以简单、快速地构建可视化图表和交互式组件，帮助用户更好地理解和展示大量的数据信息。而 ec-canvas 是 Echarts 专门针对小程序开发的图表库，通过提供对小程序原生 canvas 属性的封装和优化，从而达到将 Echarts 功能转化为小程序能够识别的 Api，从而实现在小程序中进行数据可视化的目的。

在小程序中进行数据可视化，可以帮助用户直观地展示数据，提高数据解读和分析的效率，同时让用户可以通过简单的手势操作，进行数据的筛选、比较和分析等操作，方便用户对数据的处理和挖掘，进而为用户提供更全面、精准的决策依据，帮助用户更好地理解和处理数据。此外，小程序作为一种轻量级、交互性强的移动应用程序，在访问速度、用户使用习惯等方面相较于传统的 PC 和 Web 端应用具有更为优越的使用体验。因此，将 Echarts 库和 ec-canvas 组件运用到小程序中，可以充分利用小程序的优点，来实现数据的可视化展示和业务逻辑功能的实现。

II. 安装ec-canvas

1. 下载安装ec-canvas组件

在小程序中使用 echarts 需要下载安装 ec-canvas 组件。

下面简单介绍 ec-canvas 的安装流程。

1. 打开 Github ec-canvas 项目页面：https://github.com/ecomfe/ec-canvas。
   
2. 点击Clone or download，选择Download ZIP来下载 ec-canvas 组件。
   
3. 解压缩下载的 ZIP 文件，打开解压缩后的文件夹，可以看到其中包含一个名为 ec-canvas 的文件夹，其中包含了 ec-canvas 组件的主要代码。
   
4. 将 ec-canvas 文件夹中的文件复制到您小程序项目的相应目录下，一般为 /components/ec-canvas。
   
5. 在小程序页面的 json 配置文件中添加 "usingComponents" 对象，以便能够在页面中引用 ec-canvas 组件。例如：

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

1. 在小程序页面的 wxml 文件中，即可通过标签引用 ec-canvas 组件。
   

总之，下载安装 ec-canvas 组件非常简单，只需要在 Github 上下载该组件，并将其导入到小程序项目中即可。

2. 配置组件参数

安装完成 ec-canvas 组件后，需要进行参数配置，才能正确的使用。以下是 ec-canvas 组件的几个主要参数：

1. canvas-id: Canvas 的 id，用于在 js 中获取 Canvas 对象。
2. ec-parameter: 将 echarts 配置信息以 json 类型传入 ec-canvas 组件中，这个参数很重要。
3. disable-scroll: 是否禁止页面滑动，默认值为 false。

针对这些参数，以下是如何正确地进行配置：

1. 设置 canvas-id

将在小程序页面引用 ec-canvas 组件的标签的 canvas-id 属性设置为一个字符串，名称可以任意指定，例如：

<ec-canvas canvas-id="mychart"></ec-canvas>

2. 设置 echarts 配置信息

将 echarts 的配置信息以 json 形式传入 ec-canvas 组件中。这个配置信息需要在 wxml 中通过绑定 data 值进行传递，例如：

<ec-canvas id='mychart-dom-line'
  canvas-id='mychart-line'
  ec:canvas-id='mychart-line'
  ec:binderror='onError'
  ec:show-tooltip='true'
  ec:enable-pinch-zoom='true'
  ec:touch-move-limit='20' 
  ec:scale-mode='aspectFit'
  ec:animation-duration='500'
  ec:categories='{{categories}}'
  ec:series='{{series}}'
  onInit='initChart'>
</ec-canvas>

上述代码中，绑定了 ec:categories 和 ec:series 两个参数，其中 categories 和 series 分别表示图表的类别信息和数据信息。这些参数的具体含义和用法请参考 echarts 官方文档。

3. 禁止页面滑动

如果不希望通过手势滑动页面来滚动小程序中的 echarts 图表，可以在 ec-canvas 组件上设置 disable-scroll 属性：

<ec-canvas canvas-id="mychart" disable-scroll="{{true}}"></ec-canvas>

经过以上配置后，即可在小程序中愉快的使用 echarts 组件啦！

III. 初识ec-canvas

1. echarts在微信小程序中的工作原理

ECharts 是一个基于 JavaScript 的开源可视化图表库，它可以支持在 Web 应用中使用，并且也可以在移动端应用中进行使用。为了将 ECharts 应用于微信小程序中，需要进行以下步骤：

1. 安装 echarts-for-weixin 库包

npm install echarts-for-weixin --save

2. 导入 echarts 库，并创建图表实例

<canvas id="myChart"></canvas>

const echarts = require('echarts-for-weixin');
const chart = echarts.init(this.selectComponent('#myChart').canvas);

3. 配置图表参数

const options = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
chart.setOption(options);

4. 渲染图表

this.selectComponent('#myChart').canvasToTempFilePath({
    success(res) {
        console.log(res.tempFilePath);
    },
    fail(res) {
        console.log(res);
    },
    complete(res) {
        console.log(res);
    }
}, this);

以上便是使用 ECharts 在微信小程序中进行开发的基本步骤。富有表现力的可视化数据是许多小程序所需的关键业务应用，ECharts 可以提供丰富的体验以及良好的交互设计。

2. echarts小程序版的局限性与创新点

ECharts小程序版相比于Web版有一些局限性。其中主要包括以下几点：

1. 图表类型受限: 在小程序中，ECharts的支持的图表类型会受到一定程度的限制。
2. 静态绘制: 小程序中的canvas画布可以通过调用draw方法直接将图表绘制在画布上，但这种绘制方式不支持交互事件的响应。
3. 性能限制：小程序本身的功能以及性能受限，使用ECharts可能会对小程序整体性能造成一定影响。

但是，ECharts小程序版也有一些创新点：

1. 借助微信小程序提供的开发者工具，通过调用微信小程序的API，可以实现小程序与ECharts的深度结合，提供更好的用户体验。
2. ECharts小程序版的库包体积较小，轻量化特点能更好地适应小程序开发所需。
3. 通过集成ECharts可视化库，能够实现数据可视化，方便用户对数据进行更具深度的分析。

3. 通过一个简单的示例了解ec-canvas的基本用法

下面是一个简单的示例，用于创建一个柱状图：

1. 在小程序页面的json文件中注册canvas

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

2. 在小程序页面中引入echarts库

import * as echarts from '../../utils/echarts.min.js'

3. 在小程序页面wxml文件中放置ec-canvas组件

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

4. 在小程序页面js文件中创建图表实例，并进行相关配置与渲染

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  const option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

以上便是通过 ec-canvas 实现一个简单柱状图的流程，具体步骤包括创建canvas、初始化ECharts实例、配置ECharts参数、渲染图表等过程。

ec-canvas 在小程序上的使用（二）https://developer.aliyun.com/article/1426113