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


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 相关文章推荐
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js的2种继承方式详解
Mar 04 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JS实现评价的星星功能
Aug 20 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
详解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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP数组实例详解
2016/06/26 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
介绍一下write命令
2012/09/24 面试题
什么是servlet链?
2014/07/13 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
简历自我评价模板
2015/03/11 职场文书
会议通知
2015/04/15 职场文书
劳动仲裁调解书
2015/05/20 职场文书
民事二审代理词
2015/05/25 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
高一作文之暖冬
2019/11/09 职场文书
Python数据结构之队列详解
2022/03/21 Python