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


Posted in Javascript onApril 24, 2019

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

首先体验示例小程序

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

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

下载

为了兼容小程序 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文件下面的代码:

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

3.line.wxss代码如下:

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

4、line.json代码:(注意该路径是我项目的路径,大家改成自己项目路径即可)

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

5、line.js代码:

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

最终完成效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
Javascript中this的用法详解
Sep 22 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
vue中的inject学习教程
Apr 24 #Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 #Javascript
You might like
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
JS中setTimeout()的用法详解
2013/04/14 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
了解一下python内建模块collections
2020/09/07 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
继电保护工岗位职责
2014/01/05 职场文书
写给女生的道歉信
2014/01/14 职场文书
作文评语大全
2014/04/23 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
环境卫生整治简报
2015/07/20 职场文书
解除租赁合同协议书
2016/03/21 职场文书
商业计划书范文
2019/04/24 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers