微信小程序中使用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 插件 将this下的div轮番显示
Apr 09 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
浅谈开发eslint规则
Oct 01 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP children()函数讲解
2019/02/03 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python实现身份证号码解析
2015/09/01 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
上班上网检讨书
2014/01/29 职场文书
生产文员岗位职责
2014/04/05 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
环保倡议书400字
2014/05/15 职场文书
森林防火标语
2014/06/23 职场文书
学校党员对照检查材料
2014/08/28 职场文书
药店采购员岗位职责
2014/09/30 职场文书
护林员个人总结
2015/03/04 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python