微信小程序使用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();

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯专题-真题版含答案-【贪吃蛇长度】【油漆面积】【绘制圆】【高次方数的尾数】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

Ansible 自动化运维

目录 ansible 环境安装部署ansible 命令行模块inventory 主机清单 Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可…

Wireshark抓包分析教程(ubuntu版本)

安装 first&#xff0c;多亏我们的C知道&#xff0c;成功安装了wireshark&#xff0c; Steps are as following&#xff1a; 添加wireshark的软件源(PPA:personal package archive(档案)) sudo apt-add-repository ppa:wireshark-dev/stable ppa:wireshark-dev/stable 是一个…

PHP数组转对象和对象转数组

PHP数组转对象和对象转数组 <?php function array_to_object($arr){$obj new stdClass();foreach ($arr as $key > $val) {if (is_array($val) || is_object($val)) {$obj->$key array_to_object($val);} else {$obj->$key $val;}}return $obj; } function o…

Kyuubi入门简介

一、官方简介 HOME — Apache Kyuubi 二、概述 1、一个企业级数据湖探索平台 2、一个高性能的通用JDBC和SQL执行引擎 3、一个基于spark的查询引擎服务 三、优点 1、提供hiveserver2查询spark sql的能力&#xff0c;查询效率更为高效&#xff0c;首次构建连接时会持续保持连…

洛必达法则和分部积分的应用之计算数学期望EX--概率论浙大版填坑记

如下图所示&#xff0c;概率论与数理统计浙大第四版有如下例题&#xff1a; 简单说就是&#xff1a;已知两个相互独立工作电子装置寿命的概率密度函数&#xff0c;将二者串联成整机&#xff0c;求整机寿命的数学期望。 这个题目解答中的微积分部分可谓是相当的坑爹&#xff0c;…

DDL\DML

查询字段 1、查询指定字段 select 字段1, 字段2 ,...] from 表名; select ename, sal from emp; select ename from emp; 2、查询全部字段 select * from 表名; select * from emp; 条件查询 使用 where 语句&#xff0c;放在 from 后 select * from emp where 条件…

PostgreSQL 的事务管理和并发控制机制解析

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

Prompt Engineering论文梳理(主要为2022年)

AutoPrompt &#xff08;EMNLP2020&#xff09; Shin T, Razeghi Y, Logan IV R L, et al. Autoprompt: Eliciting knowledge from language models with automatically generated prompts[J]. arXiv preprint arXiv:2010.15980, 2020. 基本架构&#xff0c;original input t…

关联分析-Apriori

关联分析-Apriori 1. 定义 关联分析就是从大规模数据中&#xff0c;发现对象之间隐含关系与规律的过程&#xff0c;也称为关联规则学习。 2. 相关概念 2.1 事务、项与项集 订单号购买商品0001可乐、薯片0002口香糖、可乐0003可乐、口香糖、薯片 以上面的订单为例&#xf…

elasticsearch使用记录

参考文章&#xff1a;https://elasticsearch-py.readthedocs.io/en/v8.8.2/ 参考文章&#xff1a;https://cuiqingcai.com/6214.html 参考文章&#xff1a;https://www.cnblogs.com/cupleo/p/13953890.html elasticsearch版本&#xff1a;8.8.2(软件包发行版) python版本&#…

MySQL 读写分离

目录 一、什么是读写分离&#xff1f; 二、为什么要读写分离呢&#xff1f; 三、什么时候要读写分离&#xff1f; 四、主从复制与读写分离 五、MySQL 读写分离原理 六、企业 使用MySQL 读写分离场景 1&#xff09;基于程序代码内部实现 2&#xff09;基于中间代理层实现…

React重新渲染的触发机制及其优化策略

React是一个用于构建用户界面的JavaScript库&#xff0c;它的核心特点之一是使用虚拟DOM&#xff08;Virtual DOM&#xff09;来实现高效的组件渲染。那组件重新渲染的机制是如何呢&#xff1f;基于这些机制&#xff0c;如果进行优化呢&#xff1f; 虚拟DOM是一个用JavaScript对…

"科技与狠活"企业级无代码开发MES系统,一周实现数字化

随着科技的不断发展&#xff0c;企业级无代码开发平台成为了一种新型的解决方案&#xff0c;能够有效降低软件开发门槛&#xff0c;提升开发效率。在制造业领域&#xff0c;MES系统&#xff08;Manufacturing Execution System&#xff09;作为一种关键的生产管理工具&#xff…

C# 全局响应Ctrl+Alt+鼠标右键

一、简述 某些应用&#xff0c;我们希望全局自定义热键。按键少了会和别的应用程序冲突&#xff0c;按键多了可定用户操作不变。因此我计划左手用CtrlAlt&#xff0c;右手用鼠标右键呼出我自定义的菜单。 我使用键盘和鼠标事件进行简单测试&#xff08;Ctrl鼠标右键&#xff…

[SQL系列] 从头开始学PostgreSQL 自增 权限和时间

[SQL系列] 从头开始学PostgreSQL 事务 锁 子查询_Edward.W的博客-CSDN博客https://blog.csdn.net/u013379032/article/details/131841058上一篇介绍了事务&#xff0c;锁&#xff0c;子查询 事务有点像是原子操作&#xff0c;需要有完整性&#xff0c;要么全都完成了&#xff…

2023年深圳杯数学建模A题影响城市居民身体健康的因素分析

2023年深圳杯数学建模 A题 影响城市居民身体健康的因素分析 原题再现&#xff1a; 以心脑血管疾病、糖尿病、恶性肿瘤以及慢性阻塞性肺病为代表的慢性非传染性疾病&#xff08;以下简称慢性病&#xff09;已经成为影响我国居民身体健康的重要问题。随着人们生活方式的改变&am…

flutter开发实战-RepaintBoundary实现Widget截图功能

flutter开发实战-RepaintBoundary实现Widget截图功能 在开发中&#xff0c;遇到需要使用截图&#xff0c;像iOS可以截图UIView获取到UIImage&#xff0c;在flutter中可以使用RepaintBoundary实现截图功能 相机拍摄的图片&#xff1a; RepaintBoundary截图后的图片 一、Re…

Docker 全栈体系(七)

Docker 体系&#xff08;高级篇&#xff09; 五、Docker-compose容器编排 1. 是什么 Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;写好多个容器之间的调…

python selenium爬虫自动登录实例

拷贝地址&#xff1a;python selenium爬虫自动登录实例_python selenium登录_Ustiniano的博客-CSDN博客 一、概述 我们要先安装selenium这个库&#xff0c;使用pip install selenium 命令安装&#xff0c;selenium这个库相当于机器模仿人的行为去点击浏览器上的元素&#xff0…