微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

1、微信小程序使用echarts，首先下载echarts并导入小程序项目中，因小程序后期上线对文件大小有要求，所以建议进行定制下载导入可减少文件大小占比，也可以下载以前旧版本文件比较小的应付使用

下载echarts： https://echarts.apache.org/zh/download.html

定制下载：https://echarts.apache.org/zh/builder.html

旧版本查看： https://archive.apache.org/dist/echarts/

下载好后，在使用页面的json文件中配置

 {"component": true,"usingComponents": {"ec-canvas": "../../../ec-canvas/ec-canvas"}}

在需要使用的wxml和wxss中写好容器的样式代码

 <view class="echarts1" ><view wx:if="{{canvasIsShow}}" class="container" style="width: 100%; height: 100%;"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas></view></view>

最后在js文件中引用并编写图例代码及数据即可

import * as echarts from '../../../ec-canvas/echarts'function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 像素});canvas.setChart(chart);var option = {barWidth: 20,grid:{x:40,    //图例左边距y:30,    //图例上边距x2:25,   //图例右边距y2:20,   //图例下边距},xAxis: {type: 'category',data: ['1','2','3','5','6','7','8'],  //x轴数据axisLabel: {interval: 0,textStyle: {show:true,fontSize: '9',},},},yAxis: {type: 'value',axisLabel: {textStyle: {show:true,fontSize: '10',},},},series: [//柱形图{data: [10,20,30,40,50,60,70],type: 'bar',color: 'rgb(0, 153, 255)',},//线型图{data: [15,25,35,45,55,65,75],type: 'line',color: 'rgb(255, 136, 0)',itemStyle: {normal: {label: {show: true, //开启显示position: 'top', //在上方显示textStyle: { //数值样式color: 'black',fontSize: '9'}}}},}]};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart},canvasIsShow: true, //图表是否渲染},
})

2、图例重新渲染方法

使用后，如果需要让图例随数据变化而变化或者重新渲染，可直接使用

wx:if=“{{ }}”
来进行条件渲染，即可做到重新刷新

3、图例图层太高，可能会导致部分样式被遮挡，如下图情况：

给被遮挡标签加入position: fixed;z-index: 9999后，在模拟器中显示正常，但在真机上这个问题依旧存在，把被遮挡的改为就可以解决问题，如下图

但是在标签里，无法使用或者等标签，那可以投机取巧灵活使用

<picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}"><cover-view class="epidemic-header"><cover-view class="cover-input">{{casArray[casIndex]}}</cover-view></cover-view></picker>

这样就可以修改里的显示内容啦

感谢阅读，对您有帮助的话留下个宝贵的关注，点赞收藏吧

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题相关推荐

微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

1、微信小程序使用echarts，首先下载echarts并导入小程序项目中，因小程序后期上线对文件大小有要求，所以建议进行定制下载导入可减少文件大小占比，也可以下载以前旧版本文件比较小的应付使用

2、图例重新渲染方法

3、图例图层太高，可能会导致部分样式被遮挡，如下图情况：

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题相关推荐

最新文章

热门文章