在微信小程序中使用图表的方法示例


Posted in Javascript onApril 25, 2019

前言:网上有许多的图表库,如:Echarts、Tau Charts、ChartJS等等,具体自行百度。

这次我们使用的是:Echarts

官方教程:点击查看

Echarts下载地址:飞机直达

1.下载好之后,把里面的ec-canvas文件夹复制到项目中,如:在项目中建立一个文件夹component ,然后把ec-canvas放到component文件夹里面。

在微信小程序中使用图表的方法示例

2.在pages中新建一个页面,我这边建立了一个echarsDemo页面,然后在echarsDemo目录中的index.json文件中引入图表组件,代码如下:

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

3.index.wxml代码 (注意一定要给ec-canvas 设定宽高)

<view class="container">
 <ec-canvas id="mychart-dom-bar" style="width:100%;height:300px;" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

4.index.js代码

import * as echarts from '../../component/ec-canvas/echarts';

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

 //这里复制了官方示例配置
 var option = {
  title: {
   text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
   data: ['销量']
  },
  xAxis: {
   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
   name: '销量',
   type: 'bar',
   data: [5, 20, 36, 10, 10, 20]
  }]
 };
 chart.setOption(option);
 return chart;
}

Page({

 /**
  * 页面的初始数据
  */
 data: {
  ec:{
   onInit:initChart
  }
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 }
})

效果图

在微信小程序中使用图表的方法示例

总结:因为也是第一接触Echarts时,遇到了一个小坑,忘记给ec-canvas设置宽高了,导致页面空白。

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

Javascript 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
You might like
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
php对象工厂类完整示例
2018/08/09 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
如何用python整理附件
2018/05/13 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
学习雷锋活动总结
2014/04/29 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
工程承包协议书
2014/10/20 职场文书
委托培训协议书
2014/11/17 职场文书
小学生通知书评语
2014/12/31 职场文书