微信小程序使用ECharts的示例详解

目录
  • 安装 ECharts 组件
  • 使用 ECharts 组件
  • 图表延迟加载

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.js
  • echarts.wxml
  • echarts.wxss
  • echarts.json

在文件 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">

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

</view>

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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel中单行换成多行

今天碰以下情况&#xff1a; 这在excel表中是在一个单元格&#xff0c;现在需要对其进行转换&#xff0c;将一个单元格换成多行 步骤&#xff1a; 1.删除换行符&#xff0c;添加一个逗号 2.选择数据-分列-分隔字符-逗号-确定 3.复制上述数据&#xff0c;选择性粘贴-转置 完…

MemberApplication

目录 1 MemberApplication 1.1 /// 发送验证码 1.1.1 //验证码超时时间 1.2 /// 验证码验证 MemberApplication /// 发送验证码

2816. 判断子序列

题目链接&#xff1a; 自己的做法&#xff1a; #include <bits/stdc.h>using namespace std;const int N 1e5 10; int a[N], b[N]; int main() {int n, m;bool flag true;scanf("%d%d", &n, &m);for (int i 0; i < n; i) scanf("%d"…

笙默考试管理系统-MyExamTest(10)

笙默考试管理系统-MyExamTest&#xff08;10&#xff09; 目录 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙默考试管理系统-MyExamTest 五、 笙默考试管理系统-MyExamTest 笙默考试管理系统-MyExa…

哈希:探索快速的数据存储和搜索方法

哈希&#xff1a;探索快速的数据存储和搜索方法 哈希表作为一种高效的数据存储结构&#xff0c;可以使数据的存储位置与关键码之间建立一一映射的关系&#xff0c;从而加快元素的搜索速度。然而&#xff0c;哈希方法也面临着哈希冲突的问题&#xff0c;即不同的关键字通过相同…

dxf怎么转换成PDF格式?转换方法其实很简单

PDF文件是一种可靠的文件格式&#xff0c;可以在各种操作系统和软件上打开和查看。而dxf是CAD文件的一种格式&#xff0c;打开它一般都是需要相关的操作软件才能打开&#xff0c;不是特别方便&#xff0c;将dxf文件转换成PDF格式就可以很好的解决这一问题&#xff0c;下面教大家…

解锁新技能《基于logback的纯java版本SDK实现》

开源SDK&#xff1a; <!--Java通用日志组件SDK--> <dependency><groupId>io.github.mingyang66</groupId><artifactId>oceansky-logger</artifactId><version>4.3.6</version> </dependency> <!-- Java基于logback的…

Kafka - Primie Number of Partitions Issue Consumer Group Rebalance

文章目录 生产者&#xff1a;将数据写入 Kafka 的客户端。 消费者&#xff1a;从 Kafka 中读取数据的客户端。 Topic&#xff1a;Kafka 中用于组织和存储数据的逻辑概念&#xff0c;类似于数据库表。 Record&#xff1a;发送到 Topic 的消息称为 Record。 Partition&#x…

electron 安装失败,Electron failed to install correctly

我的电脑是mac&#xff0c;这个问题上网找了很多解决办法试了一下都不行&#xff0c;删除重装也不太行&#xff0c;但是单独安装是可以的 install electron执行完后再启动就可以啦 npm start下面的不太行 1.切到node_modules/electron执行如下指令 node install.js还有 nod…

图像清晰度判断

FFT&#xff08;Fast Fourier Transform&#xff09;是一种常用的频域分析工具&#xff0c;可以将图像从空间域转换到频域。在频域中&#xff0c;高频对应了图像的细节部分&#xff0c;低频对应了图像的大致形状。因此&#xff0c;我们可以通过计算图像在高频部分的能量来评估图…

List有值二次转换给其他对象报null

List<PlatformUsersData> listData platformUsersMapper.selectPlatformUserDataById(data); users.setPlatformUsersData(listData);为什么listData 有值&#xff0c;users.getPlatformUsersData&#xff08;&#xff09;仍然为空在这段代码中&#xff0c;我们假设listD…

NLP(六十)Baichuan-13B-Chat模型使用体验

2023年7月11日&#xff0c;百川智能正式发布参数量130亿的通用大语言模型Baichuan-13B-Base、对话模型Baichuan-13B-Chat及其INT4/INT8两个量化版本。   本文将介绍大模型BaiChuan-13B-Chat的使用体验&#xff0c;其HuggingFace网址为&#xff1a;https://huggingface.co/bai…

【团队协作开发】IDEA中Git新建自己的dev工作分支,合并到master主分支教程(极其简单,新手)

文章目录 一、创建新dev工作分支二、push到自己的远程dev工作分支三、工作分支合并到master主分支1、先切换到master主分支2、将远程工作dev分支的内容merge到当前master分支中3、将merge提交到远程master分支 一、创建新dev工作分支 创建完新dev分支以后将默认切换到新dev分支…

csdn 机器人回答 Spring 设计模式

Spring框架中使用了多种设计模式&#xff0c;包括但不限于&#xff1a; 依赖注入&#xff08;DI&#xff09;模式&#xff1a;通过DI模式&#xff0c;Spring框架可以将对象之间的依赖关系从代码中解耦出来&#xff0c;使得代码更加灵活、可维护。 控制反转&#xff08;IoC&…

FFmpeg5.0源码阅读—— avcodec_send_frame avcodec_receive_packet

摘要&#xff1a;本文主要描述了FFmpeg中用于编码的接口的具体调用流程&#xff0c;详细描述了该接口被调用时所作的具体工作。   关键字&#xff1a;ffmpeg、avcodec_send_frame、avcodec_receive_packet   读者须知&#xff1a;读者需要了解FFmpeg的基本使用流程&#xf…

如何理解自动化

目录 1.如何定义自动化 2.自动化给人类带来的福利 3.如何学习自动化 4.自动化潜在的危害 1.如何定义自动化 自动化是指利用计算机、机械、电子技术和控制系统等现代科学技术手段&#xff0c;对各种工业、商业、农业和日常生活中的操作和过程进行自动控制和执行的过程。它旨在…

如何使用Java开发iOS应用?

使用Java开发iOS应用并不直接支持&#xff0c;因为iOS平台采用的是Objective-C和Swift作为主要的开发语言。然而&#xff0c;有一些跨平台工具和框架可以让你使用Java来开发跨平台的移动应用&#xff0c;包括iOS。 以下是一些可以考虑的选项&#xff1a; React Native&#xf…

Vc - Qt - 自定义ComboBox

示例代码创建了一个名为ComboBoxWidget的自定义QWidget类&#xff0c;并在initUI方法中创建了一个垂直布局。然后将一个只读的QLineEdit和一个QPushButton添加到布局中。当按钮被点击时&#xff0c;会调用showMenu方法&#xff0c;该方法创建一个QMenu并添加选项。每个选项连接…

CodeForces:Madoka and Underground Competitions

经过观察&#xff0c;发现只要延小区域 右上-左下 的对角线填满X即可&#xff0c;那么就是可以总结为满足(i j) % k (r c) % k #include <bits/stdc.h> using namespace std; int t; void solve(){int n, k, r, c;cin >> n >> k >> r >> c…

什么是搜索引擎?2023 年搜索引擎如何运作?

目录 什么是搜索引擎&#xff1f;搜索引擎的原理什么是搜索引擎爬取&#xff1f;什么是搜索引擎索引&#xff1f;什么是搜索引擎检索?什么是搜索引擎排序&#xff1f; 搜索引擎的目的是什么&#xff1f;搜索引擎如何赚钱&#xff1f;搜索引擎如何建立索引?网页抓取文本处理建…