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

前言：网上有许多的图表库，如：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设置宽高了，导致页面空白。

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

赞 (0)

相关推荐

  • 微信小程序中使用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

  • 在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表 Echart UI构建(柱状图) Echart 假数据 Echart 动态设置数据 柱状图UI示例 // Echart config,包括init data 和style及数据类型 var option = { animation: false,//提高页面加载速度,关闭echart的动画 grid: [ //grid section UI ... ], xAxis: [ //xAxis section UI ... ], yAxis: [ //yAxis sec

  • 微信小程序图表插件(wx-charts)实例代码

    微信小程序图表插件(wx-charts)实例代码

    微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧 支持图表类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 代码分析 Here 参数说明 opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas宽度,单位为px opts.height Number required can

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

    前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载好之后,把里面的ec-canvas文件夹复制到项目中,如:在项目中建立一个文件夹component ,然后把ec-canvas放到component文件夹里面. 2.在pages中新建一个页面,我这边建立了一个echarsDemo页面,然后在echarsDemo目录中的index.json文件中引入

  • 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

  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x

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

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

  • 微信小程序中转义字符的处理方法

    微信小程序中转义字符的处理方法

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用 这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调

  • 微信小程序获取网络类型的方法示例 原创

    微信小程序获取网络类型的方法示例 原创

    本文实例讲述了微信小程序获取网络类型的方法.分享给大家供大家参考,具体如下: 这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法.代码如下: index.js: Page({ /** * 页面的初始数据 */ data: { netType:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this; try { wx.getNetworkType({ success: function(res

  • 微信小程序对图片进行canvas压缩的方法示例详解

    微信小程序其实自带一个图片压缩的API wx.compressImage,但是这玩意目前感受就是个垃圾.IOS大多数情况下据说还可以,安卓有的时候降低质量压缩后体积反而变大,而且没办法控制其压缩至具体指定的大小,压缩后多大看天意.所以需要使用画布去自己实现一个图片压缩方法. 简单来讲原理就是:找个不显示在页面上的画布画上去,再取出,如果体积还是太大,缩小尺寸后再画,再取,递归下去,直到体积满足要求.(所以限制的越小,图片越大,压缩越久,递归次数越多) 第一步:新建一个zipPic.js文件(名字

  • 在小程序中使用canvas的方法示例

    在小程序中使用canvas的方法示例

    一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者.所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的办法. 截图: 效果图/制作页面/颜色选择 主要是以下几个问题: 1.颜色选择器 2.页面通信 3.组件间通信 4.canvas(生成图片.预览/保存.文字换行) 1.颜色选择器 从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件.写这个d

  • 微信小程序获取用户绑定手机号方法示例

    微信小程序获取用户绑定手机号方法示例

    用户调用wx.login()方法,获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) } }); code传给后台,凭证code获取session_key和openid https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=aut

  • 如何在微信小程序中存setStorage

    这篇文章主要介绍了如何在微信小程序中存setStorage,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js中存入setStorage,key是你的键,data是你的值 wx.setStorage({ key: 'mm', data: 1, }) // 获取getStorageSync的方式 console.log(wx.getStorageSync('mm')) #获取的方式 接下来是或数据中的存取 ,其实是一样的啦,直接上代码 js文件

随机推荐