文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序Echarts动态使用及图表层级踩坑解决的方法

2023-07-05 13:20

关注

本篇内容介绍了“微信小程序Echarts动态使用及图表层级踩坑解决的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

介绍一下Echarts for weixin

导入源码

通过仓库里面的介绍,我们可以直接下载代码,并导入到微信开发者工具中。(以下是导入后并运行起来的效果)

微信小程序Echarts动态使用及图表层级踩坑解决的方法

微信小程序Echarts动态使用及图表层级踩坑解决的方法

可以看到图表示例中包含了所有常用的Echarts实例,并且根据小程序的特性,给出了延迟加载、单页面多图表、页面阻塞、保存文件等实例。

文件夹

需要注意的是,官方示例中的ec-canvas文件中包含了所有图表代码,我们可以根据自己的需求去自定义构建图表,从而降低代码的大小。点击进入自定义图表链接

了解源码

我们可以随意打开一个示例图表,点击开发工具下方的页面路径,可以进入到对应图表的js文件中。

微信小程序Echarts动态使用及图表层级踩坑解决的方法

<view class="container">  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas></view>
import * as echarts from '../../ec-canvas/echarts';const app = getApp();function initChart(canvas, width, height, dpr) {  const chart = echarts.init(canvas, null, {    width: width,    height: height,    devicePixelRatio: dpr // new  });  canvas.setChart(chart);  var option = {    backgroundColor: "#ffffff",    series: [{      label: {        normal: {          fontSize: 14        }      },      type: 'pie',      center: ['50%', '50%'],      radius: ['20%', '40%'],      data: [{        value: 55,        name: '北京'      }, {        value: 20,        name: '武汉'      }, {        value: 10,        name: '杭州'      }, {        value: 20,        name: '广州'      }, {        value: 38,        name: '上海'      }]    }]  };  chart.setOption(option);  return chart;}Page({  data: {    ec: {      onInit: initChart    }  }});

动态Echarts for weixin

通过阅读不同的Echarts示例源码,我们只是了解了Echarts在小程序中的使用过程,但是我们在实际运用中,是需要和后端进行接口对接等动态操作数据的。

动态的过程,对于页面上组件其实是不需要改动的,可以直接按照官方示例去写。我们只需要修改小程序中 js 的逻辑即可。

<view class="echarts_wrapper">  <ec-canvas id="data-trend-chart" canvas-id="data-trend-chart" ec="{{ ecTrend }}"></ec-canvas></view>

这里需要注意的是,需要在 ec-canvas 外面包一层元素,并指定宽高,否则 canvas 会无法渲染出来。

data: {    ecTrend: { // echarts初始化      lazyLoad: true    },}
onReady() {    // 初始化数据趋势 echarts    this.ecDataTrendComponent = this.selectComponent('#data-trend-chart');    this.getTrend()}
getTrend() {    setTimeout(() => {        // 初始化完成之后,直接获取后台数据进行绘制canvas        this.ecDataTrendComponent.init((canvas, width, height, dpr) => {            // 获取组件的 canvas、width、height 后的回调函数            // 在这里初始化图表            const chart = echarts.init(canvas, null, {              width: width,              height: height,              devicePixelRatio: dpr // new            });            let xAxis = ["3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.30","3.31"]            let series = [{"data":[0,0,0,0,0,0,0,0,1,0,0,0,0,17],"name":"单量","type":"line"}]            // 将后台的值传递给 setTrendOption 方法            setTrendOption(chart, xAxis, series);            // 将图表实例绑定到 this 上,可以在其他成员函数(如 dispose)中访问            this.ecDataTrendChart = chart;            // 注意这里一定要返回 chart 实例,否则会影响事件处理等            return chart;        });    }, 0)},

这里需要注意一下,必须要返回实例,否则页面上无法渲染出图表数据

function setTrendOption(chart, xAxis, series) {  const option = {    tooltip: {      show: true,      trigger: 'axis'    },    grid: {      top: '10',      left: '5',      right: '5',      bottom: '10',      containLabel: true    },    toolbox: {      show: false    },    xAxis: {      type: 'category',      boundaryGap: false,      data: xAxis    },    yAxis: {      type: 'value'    },    series: series  };  chart.setOption(option);}

后端接口返回的数据可能有差异,可以根据不同的参数进行适配(具体参数可参见Echarts官方文档说明)

数据展示

根据上方代码,我们可以生成对应的数据图表

微信小程序Echarts动态使用及图表层级踩坑解决的方法

微信小程序Echarts动态使用及图表层级踩坑解决的方法

踩坑系列(持续更新)

图表层级

当我们点击日期弹出层时,会发现数据趋势的图表层级置于最顶端了,那么我们就需要对图表的层级进行修改。

由于小程序的限制,原生组件的层级是顶级的且无法修改的,那么我们就只能对图表进行显示和隐藏操作。

wx:if vs hidden (此部分是在微信官方文档中摘录)

根据微信文档中的说明,我们不需要使用 wx:if,可以使用 hidden 来代替。

<view class="echarts_wrapper" hidden="{{calendarShow}}">  <ec-canvas id="data-trend-chart" canvas-id="data-trend-chart" ec="{{ ecTrend }}"></ec-canvas></view>

“微信小程序Echarts动态使用及图表层级踩坑解决的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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