微信小程序---使用Echarts和分包

马丁路德 等级 1362 0 0

微信小程序中使用Echarts和分包

假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wx-charts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echarts更为熟悉,所以我选择了Echarts,F2也试了下,虽然弄出来了,但是我不是太熟悉所以就放弃了。

进入正题

首先我是看到别人的文章写Echarts的,给了官网的传送门,然后就去官网顺着看了,比较简单,这里我也给个传送门吧。大体上的步骤

1、下载官网例子

2、把官网例子中的ec-canvas文件夹复制到项目目录中。

3、在具体的页面中像使用组件一样引入ec-canvas。

4、在具体的页面的js中进行初始化。

在下载完官网例子后,找到ec-canvas文件夹,里面有echarts.js,wx-canvas.js还有ec-canvas四件套。然后把这个文件夹复制到自己项目的目录下,一开始我是放到utils下的,后来分包之后就放别的地方,这里就当放在utils下了。然后项目就大了700+KiB。

页面中

xxx.json

{
  "usingComponents": {
    "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"
  }
} 

xxx.wxml

<view class="container-echarts margin-top-10">
  <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view> 

xxx.js 首先要引入echarts然后才能用下面的initChart方法,所以根据放置的ec-canvas的路径引入echarts。

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根据放置的ec-canvas的路径引入echarts
let chart = null  // 用一个变量保存echarts的初始化
let options = {   // 图形配置,用过echarts的人都知道是嘛意思~ 这里给出官网线图的基础例子
  xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
}  
function initChart(canvas, width, height, dpr) {  // 这里的canvas,width,height,dpr都可以不用管
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);
  chart.setOption(options);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart  // 这里不要加括号哦!
    }
  }
}); 

保存运行,到这一步理论上echarts已经可以显示了,实际怎么样还要自己调试的。

用一个chart变量保存echarts的初始化,官网上把options也写在方法里,我给拿出来了。那chart有什么用呢?因为大部分的数据都是异步获取的,所以要动态渲染echarts。当拿到数据后,这个chart就用上了。

chart.setOption({
  xAxis: {
    data: newData.map(item => {
      return item[0];
    })
  },
  series: {
    data: newData.map(item => {
      return item[1];
    })
  }
}) 

这里关于data的数据格式,看每个人的options里面要渲染的是什么图吧。我这里用的是官网给的这个例子传送门,echarts的数据更新可以直接用setOption。

在开发者工具中的放大缩小滚动没有用,但是上传到体验版上后在手机上是好的。微信对canvas有type="2d",在ec-canvas中想要使用type="2d"的话,要改动ec-canvas.js

data: {
  isUseNewCanvas: true // 这里改成true, 默认是false
} 

因为:isUseNewCanvas默认是false,是旧版的canvas。

<!-- 新的:接口对其了H5 -->
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
<!-- 旧的 -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> 

echarts.js体积大的问题,上传项目2MiB限制问题

就下载的ec-canvas里面的echarts.js有几百KiB,相对于2MiB的来说挺大的,当我上传项目的时候提示我超出限制,那能想到的就是减小echarts.js的体积和分包两个能即时见效的方法了。

echarts.js体积大的问题

在echarts的官网有按需构建的方法(传送门---在线定制),进入下面的在线定制,选择自己需要图,我就选了折线图,坐标系选了直角坐标系,组件里除了刷选,工具栏和自定义图形外别的都选了,其它选项把svg也勾上了,然后点击下载进入building页面,这里等它构建完成会自动下载一个echarts.min.js文件,大小最后少了200来KiB。然后把它重命名成echarts.js替换进ec-canvas里。

上传项目2MiB限制问题

echarts.js的体积减少了,但是上传的限制问题还在,那就是分包了。

在app.json里面,有一个subpackages

{
  "subPackages": [
    {
      "root": "xxx/xxx",
      "name": "xxx",
      "independent": false,
      "pages": [
        "pages/xxx",
        "pages/xxx",
        "pages/xxx"
      ]
    },
    {
      "root": "baoziTask/",
      "name": "baozi",
      "pages": [
        "pages/roubaozi/roubaozi"
      ]
    }
  ],
} 

这个分包在官网上讲的挺简单的,但是在我使用时是这样理解的。

root是要分包的路径,我是放到根目录的。那么baoziTask下的所有文件都会被认为是一个包。那不在这个baoziTask路径下的文件都会被打包进app这个主包内。

name就是分包的别名,预下载的时候会用,这个预下载就当在某个页面的时候,想主动下载这个可能被使用的分包,以提高访问速度。比如当我进入某个页面的时候,很大可能会点击某处跳转到某个分包里面,这个时候可以预下载这个分包,而不用跳转的时候才下载这个分包。

independent是分包是否独立,但是我没用过就没有直观的感觉。说是可以单独运行,不依赖app这个主包。这个需要配置,不是代码的下载,配置preloadRule,具体的话得看官网和自己尝试了。传送门---分包预下载

pages就更好理解了啊,就是包内的页面呗。

想要跳转到这些分包内的页面的时候给跳转的url写对路径就可以了,就比如跳转到roubaozi的时候url写⬇️面这样:

url: '/baoziTask/pages/roubaozi/roubaozi' 

那怎么查看分包成功呢?

在开发者工具右上角有一个详情按钮,点击查看详情侧滑框,可以看到"本地代码"这一行,后面的大小可以点击,点击后可以看到主包和各个分包的大小。看到主包没有超过2MiB的话,那就可以上传成功了!

群众:为什么你要在KB和MB中间加个 i ?小傲娇:因为要准确表达是1024

过年杯不停,干杯就算了,喝茶喝茶🍵 My Life。

本文转自 https://juejin.cn/post/6931230680898600968,如有侵权,请联系删除。

收藏
评论区

相关推荐

微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序---使用Echarts和分包
微信小程序中使用Echarts和分包假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wxcharts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echa
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
22 行 JS 写个图片格式转换器
虽然国内大厂(豆瓣、微信公众平台 等)已支持 Google 推出的 **WebP 图片格式**来进一步优化性能,但其它多数软件平台还是只支持 BMP、GIF、JPEG、PNG 等经典格式,有时临时找个支持 WebP 的**图片格式转换器**也挺麻烦的,不如抄起键盘就是一把梭~ * * * 通用源码 ---- (function () {
10款强大的开源 Javascript 图表库
**1、ECharts** ECharts 由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的移动应用发起关联小程序操作。 ### 唤起 App打开下程序他有两种方式: 1,通过App分享小程序卡片 到微信,然后在微信上点击小程序卡片打开小程序,
AudioContext技术和音乐可视化(2)
Intro ----- 转载请注明来源,可以在[测试博客](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fth-zxj.club)查看完成效果。 本篇讲述如何绘制动态的星空,其实关联到频域数据已经没什么悬念了。 一、使用Canvas绘图 ------------ ### 1.1 位
Canvas + JavaScript 制作图片粒子效果
学习canvas,javascript的小伙伴,可以跟着我这篇文章的思路一起做一个小效果出来,代码都齐全了。 首先看一下源图和转换成粒子效果的对比图: ![Canvas + JavaScript 制作图片粒子效果](https://oscimg.oschina.net/oscnet/ded02015391ee81719a21ffa584785e84c2.
Canvas和SVG的区别
Canvas和SVG是html5支持的两种可视化技术。基于这两种技术,诞生了很多可视化工具。 Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图 API。我们很容易联想到另一个同样很优秀的web前端可视化库D3,D3是也最流行的可视化库之一,它被很多其他的表格插件所使用。D3底层基于SVG技术,与Canvas完全不
Canvas:技术小结
Canvas:技术小结 =========== ### 资料 **【教程:MDN官方中文教程】** https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas\_API/Tutorial **【系列博客:每天一点Canvas动画】** https://segmentfault.com/blog/z
ECharts 的拖拽小扩展
今天给大家介绍 echarts 中一个小例子『拖拽改变图表』的实现。这个例子是在原生 echarts 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 echarts 提供的 API 实现『定制化的』『富有交互的』功能。 ![](http://timg01.bdimg.com/timg?pacompress&imgtype=3
ECharts2.0
### 简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库[ZRender](https://www.oschina.n
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa
vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts <template> <div> <!-- 为ECharts准备一个具备大小(宽高) --> <div id="ringDiagram" :style="{w