当前位置：
  1. 首页
  2. echarts
  3. 正文
本文介绍: 为组件容器使用的样式类，可以使用宽高（width）和高度（height）设置图表宽高，也可以使用绝对定位（absolute/top/bottom/left/right）的方式设置图表位置和宽高。页面渲染完成后，使用组件ID获取组件实例（lazyComponent），保存至页面（this）实例中。为组件容器使用的样式类，注意组件容器宽高（width）和高度（height）的声明；ECharts 组件需要一个组件容器（view），多个组件可以位于同一个组件容器中，是组件对象，内部包含组件绘制所需要的数据。
目录

echarts-for–weixin 是 ECharts 官方维护的一个开源项目，提供了一个微信小程序组件（Component），我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。

echarts-for–weixin 自身包含很多使用示例，方便我们参考。

安装 ECharts 组件

克隆项目：

?

1

git clone https://github.com/ecomfe/echarts-for-weixin.git

切换版本：

?

1

git checkout v2.0.0

echarts-for–weixin 最新的 Releases 版本为 v2.0.0，内部使用的 ECharts 版本为 5.1.1，详情可以参考 Releases。

项目文件夹 ec-canvas 就是我们需要的 ECharts 组件文件夹，我们只需要把该文件夹整个复制/拷贝到我们小程序项目中就可以完成安装。

ec-canvas 目录下有一个 echarts.js，默认文件大小较大，如果我们需要使用从 官网自定义构建 的方式减小文件大小，选择的 ECharts 版本一定要和 echarts-for-weixin 版本相匹配，如：5.1.1。

使用 ECharts 组件

假设我们需要绘制图表的页面（Page）为 echarts，小程序项目中对应以下四个文件：

在文件 echarts.json 中引用声明组件：

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

ec-canvas 为 ECharts 组件名称，/activity/components/ec-canvas/ec-canvas 是小程序项目中 ECharts 组件的安装目录。

在文件 echarts.wxml 中使用组件：

?

1

2

3

<view class="ec-container"&gt;

  <ec-canvas canvas-id="echart-pie" ec="{{ec}}"&gt;</ec-canvas&gt;

</view&gt;

canvas-id 是组件ID，必须唯一；ec 是组件对象，内部包含组件绘制所需要的数据。

ECharts 组件需要一个组件容器（view），多个组件可以位于同一个组件容器中，必须保证组件初始化（onInit）之前，组件容器是有宽度和高度的；否则，可能导致图表不能正常显示，只显示空白。

在文件 echarts.wxss 中声明布局样式类：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.ec-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100vw;

  height: 100vh;

}

ec-canvas {

  width: 100%;

  height: 100%;

}

.ec-container 为组件容器使用的样式类，注意组件容器宽高（width）和高度（height）的声明；ec-canvas 为组件容器使用的样式类，可以使用宽高（width）和高度（height）设置图表宽高，也可以使用绝对定位（absolute/top/bottom/left/right）的方式设置图表位置和宽高。

在 echarts.js 中创建和绑定 ECharts 组件对象：

?

1

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

导入 echarts；

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

function initChart(canvas, width, height, dpr) {

  const chart = echarts.init(canvas, null, {

    width: width,

    height: height,

    devicePixelRatio: dpr

  });

  canvas.setChart(chart);

  var option = {

    backgroundColor: "#ffffff",

    series: [{

      label: {

        normal: {

          fontSize: 14

        }

      },

      type: 'pie',

      center: ['50%', '50%'],

      radius: ['20%', '40%'],

      data: [{

        value: 55,

        name: '北京'

      }, {

        value: 20,

        name: '武汉'

      }, {

        value: 10,

        name: '杭州'

      }, {

        value: 20,

        name: '广州'

      }, {

        value: 38,

        name: '上海'

      }]

    }]

  };

  chart.setOption(option);

  return chart;

}

ECharts 组件初始化 通用 函数，我们只需要修改函数中的 option 中的内容即可。

?

1

2

3

4

5

6

7

Page({

  data: {

    ec: {

      onInit: initChart

    }

  }

})

ECharts 组件初始化，加载图表：

图表延迟加载

如果不想页面渲染时就加载图表，就需要使用延迟加载，俗称“懒加载”。

?

1

2

3

<view class="ec-container">

  <ec-canvas id="lazy-echart-pie" canvas-id="lazy-canvas-pie" ec="{{lazyEc}}"></ec-canvas>

</view>

id 是 ECharts 组件的唯一标识，canvas-id 是 ECharts 组件内部画布（Canvas）的唯一标识。

?

1

2

3

4

5

6

7

Page({

  data: {

    lazyEc: {

      lazyLoad: true

    }

  }

})

页面渲染时，不直接初始化 ECharts 组件对象，且设置组件启用懒加载；

?

1

this.lazyComponent = this.selectComponent('#lazy-echart-pie')

页面渲染完成后，使用组件ID获取组件实例（lazyComponent），保存至页面（this）实例中。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

this.lazyComponent.init((canvas, width, height, dpr) => {

  const chart = echarts.init(canvas, null, {

    width: width,

    height: height,

    devicePixelRatio: dpr

  });

  canvas.setChart(chart);

  this.lazyChart = chart;

  var option = {

    ...

  };

  chart.setOption(option);

  return chart;

});

需要加载图表时，使用组件实例，手动 调用初始化方法（init），方法内容与 initChart 相同。为了方便后续操作图表实例（chart），也可以将它保存至页面实例中。

?

1

this.lazyChart.dispose();
显示所有内容
上一篇 【Echarts】配置项归纳
下一篇 vue使用echarts报错：Error: Initialize failed: invalid dom.

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。