使用的是echarts-for-wx插件；
正常写法案例：给tooltip数值加个%
<template>
<view>
<uni-ec-canvas
class="uni-ec-canvas"
id="uni-ec-canvas"
ref="canvas"
canvas-id="uni-ec-canvas"
:ec="ec"
></uni-ec-canvas>
</view>
</template>
<script>
// 此处将路径替换为你放置该组件的路径
import uniEcCanvas from './uni-ec-canvas/ec-canvas.vue'
export default{
data(){
return {
ec:{
options:{} //echart 配置项
}
}
},
components:{
uniEcCanvas
},
mounted(){
this.initChart()
},
methods:{
initChart(){
this.ec.option={
//其他配置项我就不写了，只展示tooltip
tooltip: {
trigger: 'axis',
confine: true, //提示框限制在图形内
axisPointer: {
type: 'line',
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
textStyle: {
// color: "#fff" //设置文字颜色
},
padding: 5, // 提示框浮层内边距，
formatter: (params)=> {
var html = params[0].name + '\n';
//资金使用率添加%
html +=
params[0].marker +
params[0].seriesName +
'：' +
params[0].value +
'%'
return html;
}
// backgroundColor: '#ee6461',
},
}
this.$refs.canvas.init();
}
}
}
</script>
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
.uni-ec-canvas{
width:100%;
height:100%;
display:block;
}
</style>
这样的写法formatter自定义是不会生效的；
想要自定义生效的正确写法
this.$refs['canvas'].ec.option={
tooltip: {
trigger: 'axis',
confine: true, //提示框限制在图形内
axisPointer: {
type: 'line',
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
padding: 5, // 提示框浮层内边距，
formatter: (params)=> {
var html = params[0].name + '\n';
//资金使用率添加%
html +=
params[0].marker +
params[0].seriesName +
'：' +
params[0].value +
'%'
return html;
}
},
}
顺带提一嘴在开发工具上看会有echarts层级太高遮挡显示层问题；这个问题不必理会，真机上显示是正常的
再使用dataZoom组件的时候会报错e.preventDefault is not a function
解决方法
找到echarts组件的vue文件，我的是 uni-ec-canvas.vue文章来源：https://www.toymoban.com/news/detail-792004.html
//在触摸事件加上preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}文章来源地址https://www.toymoban.com/news/detail-792004.html
touchStart(e) {
if (this.ec.stopTouchEvent) {
e.preventDefault();
e.stopPropagation();
return;
}
this.$emit("touchstart", e);
if (this.$curChart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = this.$curChart.getZr().handler;
if (handler) {
handler.dispatch("mousedown", {
zrX: touch.x,
zrY: touch.y,
//需要添加的方法即可解决dataZoom报错
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
handler.dispatch("mousemove", {
zrX: touch.x,
zrY: touch.y,
//需要添加的方法即可解决dataZoom报错
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
handler.processGesture(wrapTouch(e), "start");
}
}
},
touchMove(e) {
if (this.ec.stopTouchEvent) {
e.preventDefault();
e.stopPropagation();
return;
}
this.$emit("touchmove", e);
if (this.$curChart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = this.$curChart.getZr().handler;
if (handler) {
handler.dispatch("mousemove", {
zrX: touch.x,
zrY: touch.y,
//需要添加的方法即可解决dataZoom报错
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
handler.processGesture(wrapTouch(e), "change");
}
}
},
touchEnd(e) {
if (this.ec.stopTouchEvent) {
e.preventDefault();
e.stopPropagation();
return;
}
this.$emit("touchend", e);
if (this.$curChart) {
const touch = e.changedTouches ? e.changedTouches[0] : {};
var handler = this.$curChart.getZr().handler;
if (handler) {
handler.dispatch("mouseup", {
zrX: touch.x,
zrY: touch.y,
//需要添加的方法即可解决dataZoom报错
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
handler.dispatch("click", {
zrX: touch.x,
zrY: touch.y,
//需要添加的方法即可解决dataZoom报错
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
handler.processGesture(wrapTouch(e), "end");
}
}
},
到了这里，关于uniapp 如何使用echarts 以及解决tooltip自定义不生效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
