文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何在微信小程序中使用Echarts方法

2023-06-08 00:53

关注

如何在微信小程序中使用Echarts方法?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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的路径引入echartslet 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'

关于如何在微信小程序中使用Echarts方法问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯