简单的解决方法,几倍的时间去尝试、思考、追寻答案 ······
多端开发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)