首页 前端知识 微信小程序echarts图使用问题总结

微信小程序echarts图使用问题总结

2024-01-25 11:01:19 前端知识 前端哥 236 838 我要收藏

简单的解决方法,几倍的时间去尝试、思考、追寻答案 ······

多端开发echarts版本选择
app及小程序同时使用echarts图本人使用5.1.2可以多端使用

echarts.min.js 可以去官网定制 链接 ECharts 在线构建 或者直接去GitHub - Tawesome666/echarts: echarts 下载

小程序中echarts图层级太高
多种解决办法,本人在echarts图存在页面有自定义tarbar,所以只能采用cover-view及cover-image

<template>
	<cover-view class="cu-bar tabbar bg-white foot" style="letter-spacing: 0rpx;" v-if="show">
		<cover-image src="/static/images/background/tarbar.jpg"
			style="position: absolute;z-index: 993;width: 100%;height: 100%;">
		</cover-image>
		······

cover-view内部无法使用fixed绝对定位
可在最外层cover-view中使用

背景色无法使用渐变色linear-gradient
让ui切图,使用cover-image加载,进行absolute绝对定位,设置z-index在最下层,其他图标和文字使用absolute在最上层

tarbar使用fixed初始加载时bottom获取不准确,出现在其他地方后才置底
在mounted页面渲染完成后setTimeout 50ms或更长,动态显示tarbar内全部cover-view内容

小程序中echarts图滑动消失
tooltip提示框显示后拇指移动到图表外时echart图消失
在tooltip属性中添加triggerOn: 'click', 使提示框只能在点击时出现

微信小程序echarts中formatter配置全部无效
更新数据时setOption将formatter加上如:

let option = {
					xAxis: {
						data: this.recordTime,
						axisLabel: {
							interval: this.recordTime.length - 2,
							formatter: function(value, index) {
								let [c, n] = value.split(" ")
								if (n) {
									return c + "\n" + n
								}
								return c
							}
						}
					},
					yAxis: myref.option.yAxis
				}

				option.yAxis[1].axisLabel = {
					formatter: value => {
						return value != 0 ? value : ''
					},
				}
				chart.setOption(option)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/352.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!