微信小程序使用echarts以及tooltip功能

最新推荐文章于 2024-09-27 17:28:05 发布

real_忘川

最新推荐文章于 2024-09-27 17:28:05 发布

阅读量4.2k

点赞数

分类专栏： JavaScript 微信小程序

本文链接：https://blog.csdn.net/qq_40755223/article/details/103244874

版权

本文介绍了如何在微信小程序中使用Echarts，并重点解决了在异步获取数据后实现Tooltip功能的问题。由于官方文档的方法在某些情况下不适用，作者选择了直接使用Echarts的init方法。遇到的难点在于必须将初始化代码放入onLoad生命周期函数中，以避免错误。对于Tooltip，由于其不支持自动识别是否超出绘图区域，作者采用了原生方式实现，与Web端处理类似。

摘要由CSDN通过智能技术生成

const app = getApp()
import * as echarts from '../../components/ec-canvas/echarts';

let chart = null;
let data = {
	xData: [],
	yData: []
}

function setOption() {
	var option = {
		color: ["#00C8C8"],
		grid: {
			containLabel: true
		},
		tooltip: {
			show: true,
			trigger: 'axis',
			position: function(point, params, dom, rect, size){
				let x = point[0],
					y = point[1],
					viewWidth = size.viewSize[0],
					boxWidth = size.contentSize[0],
					posX = 0;
				if(x + boxWidth > viewWidth){
					posX = x - boxWidth;    
				}else{
					posX = x; 
				}
				return [posX,y];
			},
			label: {
				normal: {
					show: true
				}
			},
			axisPointer: {
				lineStyle: {
					type: 'dashed',
					color: '#00C8C8'
				},
			},
			formatter: '{b0}: {c0}人'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			axisTick: {