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

 更新时间:2022-06-15 10:14:33   作者:佚名   我要评论(0)

目录安装 ECharts 组件使用 ECharts 组件图表延迟加载echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组件(C

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

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

安装 ECharts 组件

克隆项目:

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

切换版本:

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 中使用组件:

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

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

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

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

.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 组件对象:

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

导入 echarts;

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 中的内容即可。

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

ECharts 组件初始化,加载图表:

图表延迟加载

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

<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)的唯一标识。

Page({
  data: {
    lazyEc: {
      lazyLoad: true
    }
  }
})

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

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

页面渲染完成后,使用组件ID获取组件实例(lazyComponent),保存至页面(this)实例中。

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),也可以将它保存至页面实例中。

this.lazyChart.dispose();

不需要图表时,获取图表实例,销毁图表。

以上就是微信小程序使用ECharts的示例详解的详细内容,更多关于小程序 ECharts的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
  • 微信小程序+ECharts实现动态刷新的过程记录
  • 微信小程序使用Echarts和分包的完整步骤
  • 微信小程序使用echarts获取数据并生成折线图
  • 微信小程序Echarts图表组件使用方法详解
  • 微信小程序中使用echarts的实现方法
  • 微信小程序中使用ECharts 异步加载数据实现图表功能

相关文章

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

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

    目录安装 ECharts 组件使用 ECharts 组件图表延迟加载echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组件(C
    2022-06-15
  • 5个实用的JavaScript新特性

    5个实用的JavaScript新特性

    目录前言1.# 使用"Object.hasOwn"替代“in”操作符2.# 使用"#"声明私有属性3.# 超有用的"数字分隔符"4.# 使用"?."简化"&&"和三元运
    2022-06-15
  • 解决@Scope(“prototype“)不生效的问题

    解决@Scope(“prototype“)不生效的问题

    目录@Scope(“prototype“)不生效@Scope(“prototype“)正确用法——解决Bean多例问题1.问题,Spring管理的某
    2022-06-15
  • QT实现用户登录注册功能

    QT实现用户登录注册功能

    本文实例为大家分享了QT实现用户登录注册的具体代码,供大家参考,具体内容如下 1、login.h #ifndef LOGIN_H #define LOGIN_H #include <QW
    2022-06-15
  • C#使用LINQ查询操作符实例代码(二)

    C#使用LINQ查询操作符实例代码(二)

    目录六、连表操作符1、内连接2、左外连接(DefaultIfEmpty)3、组连接七、集合操作八、分区操作符1、Take():2、TakeWhile():3、Skip():4、S
    2022-06-15
  • Golang泛型与反射的应用详解

    Golang泛型与反射的应用详解

    目录1. 泛型1.1 定义1.2 例子1.3 自定义泛型类型1.4 泛型与switch结合使用1.5 泛型实战2. 反射2.1 定义2.2 方法2.3 反射读取2.4 反射操作2.5
    2022-06-15
  • C#使用Clipboard类实现剪贴板功能

    C#使用Clipboard类实现剪贴板功能

    剪贴板是Windows操作系统中最常用的功能之一,它用来从一个应用程序向另一个应用程序传递数据,可以是文本,图象,甚至是程序对象。 不过剪贴
    2022-06-15
  • 面试手写实现Promise.all

    面试手写实现Promise.all

    目录前言常见面试手写系列Promise.resolve简要回顾源码实现Promise.reject简要回顾源码实现Promise.all简要回顾源码实现Promise.allSettled简
    2022-06-15
  • Java中String和StringBuffer及StringBuilder?有什么区别

    Java中String和StringBuffer及StringBuilder?有什么区别

    目录String类为什么是immutable(不可变的)如何保证不可变string类为不可变对象的好处前言: String 是 Java 语言非常基础和重要的类,提供了
    2022-06-15
  • C#实现读写CSV文件的方法详解

    C#实现读写CSV文件的方法详解

    目录CSV文件标准文件示例RFC 4180简化标准读写CSV文件使用CsvHelper使用自定义方法总结项目中经常遇到CSV文件的读写需求,其中的难点主要是C
    2022-06-15

最新评论