微信小程序中使用echarts的实现方法

刚开始学微信小程序，有说的不对的地方大家可以提出！

首先体验示例小程序

在微信中扫描下面的二维码即可体验 ECharts Demo：

下载

为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin项目。

其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。

ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

引入组件

微信小程序的项目创建可以参见微信公众平台官方文档。

在创建项目之后，可以将下载的ecomfe/echarts-for-weixin项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。

如果采用完全替换的方式，需要将 project.config.json 中的 appid 替换成在公众平台申请的项目 id。pages 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 app.json 中删除对应页面。

创建图表

首先，在 pages/bar 目录下新建以下几个文件：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 ‘pages/bar/index'。

index.json 配置如下：

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

这一配置的作用是，允许ECharts在 pages/bar/index.wxml 中使用 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。

index.wxml 中，ECharts创建了一个 组件，内容如下：

<view class="container">
 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

其中 ec 是一个ECharts在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：

function initChart(canvas, width, height) {
 const chart = echarts.init(canvas, null, {
 width: width,
 height: height
 });
 canvas.setChart(chart);

 var option = {
 ...
 };
 chart.setOption(option);
 return chart;
}

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

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。

下面是小程序的折线图demo：

1、首先是在pages文件夹下面新建line文件夹，里面对应的line.js、line.json、line.wxml、line.wxss

2、line.xml文件下面的代码：

3.line.wxss代码如下：

4、line.json代码：（注意该路径是我项目的路径，大家改成自己项目路径即可）

5、line.js代码：

最终完成效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于mpvue小程序使用echarts画折线图的方法示例

    第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关于组件的选择: 1.echarts-for-weixin,官方echarts的小程序版本.使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目. 2.wx-charts,

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序中使用echarts的实现方法

    微信小程序中使用echarts的实现方法

    刚开始学微信小程序,有说的不对的地方大家可以提出! 首先体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo: 下载 为了兼容小程序 Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用 ECharts. 首先,下载 GitHub 上的 ecomfe/echarts-for-weixin项目. 其中,ec-canvas 是我们提供的组件,其他文件是如何使用该组件的示例. ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-

  • uniapp在微信小程序中使用ECharts的方法

    uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 微信小程序中使用 async/await的方法实例分析

    本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe

  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

  • 在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 在微信小程序中使用mqtt服务的方法

    因为需求的关系,需要在小程序中使用mqtt来进行tcp的长连接,实时监听设备的返回状态. js中连接mqtt服务器是通过websocket来实现的,我在网上找了2个库,一个是eclipse开发的paho-mqtt. 项目地址:https://github.com/eclipse/paho.mqtt.javascript 一个是个人开发的mqttjs,项目地址:https://github.com/mqttjs/MQTT.js 比较了下,mqqtt.js比较灵活对小程序也有很好的支持,所以采用了这

  • ECharts的三维可视化及在微信小程序中使用示例

    目录 在微信小程序中使用 ECharts 三维可视化 在微信小程序中使用 ECharts 关于微信小程序的项目创建. 创建项目后,可以用新项目完全替换weixin项目下载的电子商务/图表,然后修改代码:或者只需将ec画布目录复制到新项目,然后进行相应的调整. 如果采用完全替换的方法,则project.config json中的appid将替换为公共平台上应用的项目id. pages目录下的每个文件夹都是一个页面.可以根据情况删除不必要的页面,然后单击应用程序删除json中的相应页面. 如果只复制

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

随机推荐