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

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

IV. 使用ec-canvas绘制图表

1. 根据echarts各组件属性设置ec-canvas参数

ec-canvas会将ECharts实例中的option参数解析为对应canvas的属性来渲染图表。根据不同组件的属性，ec-canvas会将option参数解析为对应的canvas参数。

以下是ec-canvas中使用到的一些属性参数及其对应的ECharts配置项：

• canvas: canvas自身的属性，例如id、style等。
• subtitle: 副标题的相关属性，例如textStyle。
• yAxis: 直角坐标系中y轴的相关属性，例如axisLine、axisTick、axisLabel、splitLine、min、max等。
• xAxis: 直角坐标系中x轴的相关属性，例如axisLine、axisTick、axisLabel、splitLine等。
• tooltip: 提示框组件的相关属性，例如trigger、formatter、axisPointer等。
• grid: 直角坐标系内绘图网格的相关属性，例如left、right、top、bottom、width、height、containLabel等。
• series: 数据系列的相关属性，例如symbol、symbolSize、itemStyle等。

通过在option参数中设置相应属性，可以改变ECharts图表的展现形式。例如，可以通过设置xAxis中的axisLine、axisTick以及axisLabel属性来自定义x轴，通过设置tooltip属性来定制提示框的样式等。

总之，在使用ec-canvas中，需要熟悉各个组件的参数属性，以及对应的ECharts配置项，以便将canvas上的图表效果与设计要求相匹配。

2. 配置图表的样式、类型、数据

在echarts中，通过配置option对象来配置图表样式、类型、数据。

option对象是一个包含各种配置参数的json对象，包含多个属性，每个属性对应不同的配置项，比如：标题、x轴、y轴、数据等。

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

// 引入 ECharts 主模块
import * as echarts from '../../ec-canvas/echarts';
Page({
  onLoad: function (options) {
    this.setData({
      ec: {
        // 组件 ID
        id: 'chart1',
        // canvas 宽度，单位为px
        width: 360,
        // canvas 高度，单位为px
        height: 240,
        // ECharts配置项
        option: {
          // 图表的标题
          title: {
            text: '销售量'
          },
          // 柱状图
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    });
  }
})

在上面的代码中，我们通过在data中设置一个ec对象，然后在onLoad函数中更新这个对象的值。ec对象包含了组件的ID、宽度、高度和option对象。在option中，我们定义了图表的标题和一个柱状图。其中柱状图的数据为一个长度为6的数组，每个值对应一个柱子的高度。

可以看出，通过简单地配置option对象，我们就可以完成数据的设置和图表的样式定制。可以根据ECharts的文档和API进一步了解图表类型、数据格式以及各种美化操作。

3. 使用setOption方法刷新图表

如果需要更新已经绘制的图表，可以使用setOption方法。

例如，在一个柱状图中，我们可以通过点击按钮，动态地更新数据。

完整的代码示例如下：

import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  const option = {
    title: {
      text: '销售量'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 8]
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  updateChart: function() {
    const option = {
      series: [{
        data: [15, 30, 46, 20, 20, 30, 18]
      }]
    };
    chart.setOption(option);
  }
})

在上面代码中，使用initChart函数初始化图表，设置了初始option。数据系列中的data用一个长度为7的数组来定义，表示每一个数据点对应的显示值。在updateChart函数中，通过更改数据系列中的data数组，用setOption方法更新图表的数据。当触发按钮点击事件时，调用updateChart函数实现图表的刷新。只需要更改视图中图表对应的option，再调用 setOption 方法进行更新即可。

当然，除了数据的更新，你还可以使用 setOption 函数来更新其他样式配置，比如标题、坐标系、图例、标记等。

4. 修改图表的参数并刷新画面

要修改图表参数并刷新画面，可以使用以下两种方式：

方式一：直接更新option

可以使用 chart.getOption() 获取当前图表参数，修改需要修改的属性后，再用 chart.setOption(option) 方法设置当前参数并刷新画面。

例如：

const option = chart.getOption();
option.title.text = "新标题";
option.xAxis[0].data = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
chart.setOption(option);

上述代码中，我们首先使用 getOption 方法获取了当前图表的 option 参数，然后修改了参数中的 title 和 xAxis，最后使用 setOption 方法将新的参数设置并刷新画面。这里修改了标题和x轴，其他的配置同理。

方式二：通过onInit方法更新option

通过修改onInit方法的调用参数，可以进行视图的刷新和重新绘制。

例如：

let chart = null;
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  this.setData({
    chart: chart
  });
  const option = {
    /* ...填写具体配置项 */
  };
  chart.setOption(option);
}
function updateChart() {
  const option = {
    /* ...填写修改后的配置项 */
  };
  this.setData({
    ec: {
      onInit: initChart.bind(this),
      lazyLoad: true,
      option: option
    }
  });
}

如上述代码，我们首先声明了一个chart变量，用于保存图表实例。在onInit方法中，除了常规配置项外，还通过setData方法将创建好的图表实例传给了this.data，这样我们就可以随时获取chart实例进行操作。

在updateChart函数中，通过setData方法将新的option对象传递给了ec-canvas组件，同时在onInit方法中获取最新的option，并进行了重新绘制操作。

注意：在使用这种方式时，需要将 lazyLoad 属性设置为 true，这样 ec-canvas 组件才会调用 onInit 方法，进行更新操作。

综上，通过修改 option 参数，或者重新调用 onInit 方法，我们就可以更新图表的参数并刷新画面了。不同的修改方式，可以根据具体场景进行选择。

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