uniapp 如何使用echarts 以及解决tooltip自定义不生效问题

发布时间:2024年01月12日

使用的是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层级太高遮挡显示层问题;这个问题不必理会,真机上显示是正常的
在这里插入图片描述

文章来源:https://blog.csdn.net/GongWei_/article/details/135550456
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。