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

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

V.优化echarts小程序版体验

1. 图表响应式适配

ECharts 在支持多种图表类型和丰富的配置选项的同时，也提供了响应式布局方案。

下面是一些常用的 ECharts 响应式适配方案：

1. 使用resize方法：

通过监听窗口尺寸变化事件，然后使用 chart.resize() 方法重新渲染图表。

import * as echarts from '../../ec-canvas/echarts';
Page({
  onLoad: function (options) {
    this.setData({
      ec: {
        id: 'mychart',
        option: {},
        onInit: function (canvas, width, height, dpr) {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr
          });
          this.chart = chart;
          chart.setOption(this.getOption());
          return chart;
        }
      }
    });
  },
  onReady: function () {
    // 监听窗口尺寸变化事件，执行 resize 方法重新渲染图表
    wx.onWindowResize(() => {
      this.chart && this.chart.resize();
    });
  },
  getOption: function () {
    return {...}
  },
});

2. 使用grid属性指定图表大小：

通过在 grid 属性中指定图表长和宽的百分比，实现图表响应式布局。

const option = {
  title: {
    text: '响应式布局示例'
  },
  grid: {
    width: '80%', // 宽度占 80%
    containLabel: true // 包含刻度标签
  },
  xAxis: {...},
  yAxis: {...},
  series: {...}
};

3. 使用media数据集：

可以在 option.media 中设置多组属性，这些属性将覆盖option中的配置项。通过配置media数据集，可以根据窗口大小，按照不同的宽度，采用不同的配置项。

const option = {
  baseOption: {...},
  media: [
    {
      option: {
        grid: {
          width: '90%'
        },
        series: [{
          type: 'bar',
          barWidth: 20
        }]
      }
    },
    {
      query: {
        minWidth: 800
      },
      option: {
        grid: {
          width: '50%'
        },
        series: [{
          type: 'bar',
          barWidth: 30
        }]
      }
    }
  ]
};

在上面的代码中，我们定义了两个media的数据集，分别适用于宽度小于800px和大于800px的场景。通过在media的配置中设置 query 和 option ，可以实现窗口大小判定和对应的配置项设置。

4. 使用flex布局：

重头戏来啦！相比于前面的几种方式来说，flex 布局具有更强大的响应式适配能力。

<view class='chart-container'>
  <ec-canvas id='mychart-canvas' canvas-id='mychart-canvas' ec="{{ ec }}" />
</view>

.chart-container{
  display: flex;
  width: 100%;
  height: 400rpx;
}

const option = {...}
Page({
  ...
  getOption() {
    if (someCondition) {
      option.title.text = '第一种配置项';
    } else {
      option.title.text = '第二种配置项';
    }
    return option;
  }
});

在上面的代码中，我们使用CSS flex布局和onInit中的option配置来实现图表的响应式适配。

具体来说，我们将 ec-canvas 组件放置在一层 div 容器中，然后通过设置它的 display 属性为 flex，以父容器的宽度为基准，进行图表的自适应展示。

同时我们也可以通过在 getOption() 方法中，对不同的情况返回不同的配置项，以针对不同的屏幕大小进行设置。

2. echarts小程序版的性能与问题解决方案

ECharts 微信小程序版是 ECharts 官方提供的一款专为微信小程序定制和优化的图表库，拥有跨平台使用、数据可视化、图表丰富等特点，同时在性能、稳定性等方面也做了不少优化。

但是，即便是经过了优化，ECharts在微信小程序的使用过程中，也会出现一些问题，例如初始加载慢、过度渲染、内存泄漏等。这里介绍一些常见性能问题及对应解决方案：

1. 初始加载慢

经常会出现由于数据量过大、初始化过程中的复杂计算和渲染等原因，导致图表初始加载过慢的情况。这时可以通过一些措施来缓解这种情况：

• 使用缓存

可以通过在后端缓存数据，前端通过 AJAX 调用数据，然后利用 chart.clear() 和 chart.load() 的数据更新方法来刷新页面。

• 懒加载

可以通过设置 lazyLoad 属性为 true，当视口进入范围内时才会初始化图表，避免不必要的初始计算和渲染。

• 数据优化

优化单条数据的显示方式，比如横轴坐标的旋转和隐藏、数据的饼图标签重叠等。

2. 过度渲染

过度渲染是指当数据过多时，渲染所需的时间就会变得十分长，导致页面出现卡顿和操作响应不及时等问题。这里有几个解决方案：

• 数据分段

针对数据量大的问题，可以将数据分段展示，比如分段渲染大数据量的折线图、柱状图等。

• 图表共用

将数据分散到多个图表中展示，互不重叠、互相协作，降低单个图表的数据负荷。

• 动态渲染

对于连续-flow 的数据，可以通过动态渲染方式，来减轻一次性渲染的负担，且互动体验不会影响整体性能。

3. 内存泄漏

内存泄漏是一个普遍存在且引发疑难问题的情况，通常会导致页面卡顿，甚至直接崩溃的情况。解决方案可以是手动释放资源、开启回收机制、优化赋值操作等：

• 手动释放

在onUnload方法中，释放对chart实例的引用。应避免在视图销毁之前，持有图表实例的引用，以便系统可以释放图表的相关资源。

• 启用分级回收算法

可以在图表初始化的anchorOption中开启 animationThreshold 配置项，以便可以在不同的动画阈值下显示动画。

• 优化赋值操作

对于复杂的图表或需要 frequent 数据更新的特殊图表类型，可以考虑避免使用直接赋值数据的方式。可以通过合理的数据处理以及增量更新等方式来减轻渲染压力。

以上是一些常见的问题和解决方案，但在实际开发过程中，遇到的问题和解决方案还有很多，也需要根据实际情况进行优化，以提高用户体验和性能。

3. 减少echarts小程序版体积的五种方法

VI. 结语

1. 如何使用ec-canvas实现小程序中的数据可视化

在微信小程序中，由于代码体积的限制，我们需要考虑对 ECharts 进行体积优化，以便能够更好地适应微信小程序的开发。

以下是几个常见的 ECharts 体积优化方案：

1. 异步加载：

可以使用 importScript 或者 wx.request 异步加载，只有当数据请求成功后，才会进行图表的渲染，从而实现按需加载。这种方式不仅可以缩短初始加载时间，还可以根据需求动态加载图表模块。

2. 按需引入：

ECharts 库包含了很多组件和功能，但实际应用场景中，并不一定都需要用到。因此，按需引入需要的组件，可以有效地减小 ECharts 库的体积。可以通过在page.json中配置：

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

或者在页面内使用import动态引入：

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

3. 离线打包：

通过使用 ECharts 的离线打包功能（Optimized ECharts），可以在保证功能不变的前提下，将体积从原来的 1.1MB 降低到 300KB 左右。在官网上下载离线打包文件，然后直接引入即可。

4. 使用 gzip：

在使用 ECharts 库时，提供给前端的 JS 文件可以通过压缩（gzip）来减小体积。服务器返回时，先判断用户的请求是否支持 gzip 压缩，如果支持，则返回 gzip 压缩后的 JS 文件。

5. 使用 CDN：

在开发过程中，如果遇到体积过大的 ECharts 库，可以考虑使用 CDN。CDN 服务商会对一些文件进行大量的缓存，以备下一次使用。这种方式可以缓解压缩包文件过大的问题，将 ECharts 库的体积大大减小。

综上所述，五种方法可以帮助我们在微信小程序中减少 ECharts 库的体积，提高用户的使用体验及性能，可以根据实际情况选择其中一种或多种方法进行实现。

2. 小程序版的echarts在性能、使用上的不断优化

ECharts 微信小程序版是 ECharts 官方提供的一款专为微信小程序定制和优化的图表库。在开发者不断的反馈和贡献下，ECharts小程序版也在不断地进行性能和使用上的优化。

下面是ECharts小程序版的性能和使用上的不断优化：

1. 增加懒加载机制：

懒加载机制是指，当组件进入可视区域时才进行初始化绘制。这样既能够优化初始加载性能，又能避免引起过度渲染等问题，提高用户体验。

2. Layout性能优化：

对于常见图表类型（如折线图、柱状图等），通过 Layout 布局调整、优化和缓存，可以在不影响图表展示效果的前提下，大大提高渲染性能。

3. 提高绘图性能：

通过 Canvas 的底层操作和微信小程序中的自定义组件技术，ECharts 微信小程序版大大提高了绘制性能和渲染效果。

4. 完善文档和示例：

ECharts 微信小程序版还提供了完善的文档和大量示例代码，可以帮助开发者更好地掌握使用技巧和最佳实践。

5. 主动响应问题和需求：

ECharts 小程序版的开发团队一直密切关注开发者的反馈和需求，通过 GitHub Issue 等渠道，积极响应问题和需求，及时提供技术支持和解决方案。

综上所述，ECharts 微信小程序版在性能和使用方面的不断优化，为开发者提供了更好的体验和更高的效率，帮助开发者更好地完成微信小程序的数据可视化需求。