关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
作者:smallWhite_js 发布时间:2024-05-22 10:39:44
标签:微信小程序,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后,在模拟器中显示正常,但在真机上这个问题依旧存在,把被遮挡的<view>改为<cover-view>就可以解决问题,如下图
但是在<cover-view>标签里,无法使用<input>或者<picker>等标签,那可以投机取巧灵活使用
<picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
<cover-view class="epidemic-header">
<cover-view class="cover-input">
{{casArray[casIndex]}}
</cover-view>
</cover-view>
</picker>
这样就可以修改<cover-view>里的显示内容啦
来源:https://www.cnblogs.com/samllWhite/archive/2022/07/16/16485498.html


猜你喜欢
- 1.字符串定义# coding:utf-8if __name__ == '__main__': &
- 今天呢,田辛老师来给大家继续讲一个著名的项目管理工具:蒙特卡洛模拟。 当然,田辛老师既然发到CSDN上面,无论如何要给出关于蒙特卡洛模拟的P
- 一、需求说明需要使用Python实现将内容转为base64编码,解码,方便后续的数据操作。二、base64简介Base64是一种二进制到文本
- 论坛有人问起如何获取读取CSS属性值,就写了下面这段兼容各浏览器的获取HTML元素的css属性值函数:function getSt
- 使用方式:new downUpData({url:"http://192.168.1.103:8080/test/data.jso
- 一个客户提供一个股价的信息,要求放在页面上,显示一些数据,需要从远程获取xml,然后解析写在网页上,开始不会觉得很难,其实蛮简单的,先用ja
- 一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html>
- 译者按:我们时常能看到不同JavaScript库/框架之间的各种比较,但这次 YUI3 架构师和 jQuery 之父的直接对话却非常难得,也
- rs.open sql,conn,A,B A: ADOPenforwardonly (=0) 只读,且当前数据记录只能向下移动。 ADOPe
- 分支的新建与合并现在让我们来看一个简单的分支与合并的例子,实际工作中大体也会用到这样的工作流程:开发某个网站。为实现某个新的需求,创建一个分
- 1、dayin() 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题。 使用方法:将要打印的内容通过&nb
- 在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用索引来加快数据处理速度也成为广大数据库用户所
- 数据库是数据的集合,与数学的集合论有密不可分的关系。为提高查询速度,我们可以:对数据表添加索引,以加快搜索速度;通过编程技巧最大限度地利用索
- 一、引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存
- Properties类简要概括: Properties类是 键和值均为字符串的可以永久存储到文件中的key-value集合java.util
- 最近github上开源了一个"新语言"vlang,火的不得了,我不信,于是乎,尝试了一下,真香。以下内存均来自https
- 本文实例讲述了Python数据类型之Set集合。分享给大家供大家参考,具体如下:set集合1.概述set与dict类似,但set是一组key
- Javascript 选择器(selector engine)似乎从 jQuery 流行以来就大行其道,改变了原有 Javascript 选
- Python 中的 timeit 模块可以用来测试一段代码的执行耗时,如一个变量赋值语句的执行时间,一个函数的运行时间等。timeit 模块
- Python实现模拟时钟代码推荐# coding=utf8import sys, pygame, math, randomfrom pyga