uni-app 使用echarts图表点击不显示图表的tooltip

v64noz0r  于 5个月前  发布在  uni-app
关注(0)|答案(4)|浏览(56)

使用echarts图表点击不显示图表的tooltip

h5qlskok

h5qlskok2#

具体描述一下
用echats纯h5方式实现折线图后,配合对应tooltip显示后,在谷歌浏览器预览,在非手机模式下可以点击显示tooltip提示窗,切换到手机模型下,点击无反应。
以下是涉及的主要代码

<canvas class="block chart-1" canvas-id="chartOne" id="chartOne"></canvas>

import * as echarts from 'echarts'
let chart1

initChart1 (source) {
	let dom = document.getElementById('chartOne')
	chart1 = echarts.init(dom);
	chart1.setOption({
		tooltip: {
			trigger: 'axis',
			show: true,
			triggerOn: 'click'
		},
		xAxis: {
			type: 'category',
			data: ['2021-1', '2021-2', '2021-3', '2021-4'],
			boundaryGap: false,
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [120, 200, 150, 140],
			type: 'line',
			smooth: true
		}]
	})
}
2hh7jdfx

2hh7jdfx3#

具体描述一下
用echats纯h5方式实现折线图后,配合对应tooltip显示后,在谷歌浏览器预览,在非手机模式下可以点击显示tooltip提示窗,切换到手机模型下,点击无反应。
以下是涉及的主要代码

<canvas class="block chart-1" canvas-id="chartOne" id="chartOne"></canvas>

import * as echarts from 'echarts'

initChart1 (source) {
	let dom = document.getElementById('chartOne')
	chart1 = echarts.init(dom);
	chart1.setOption({
		tooltip: {
			trigger: 'axis',
			show: true,
			triggerOn: 'click'
		},
		xAxis: {
			type: 'category',
			data: ['2021-1', '2021-2', '2021-3', '2021-4'],
			boundaryGap: false,
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [120, 200, 150, 140],
			type: 'line',
			smooth: true
		}]
	})
}

如果不使用 uni-app 是否正常?

ryhaxcpt

ryhaxcpt4#

具体描述一下
用echats纯h5方式实现折线图后,配合对应tooltip显示后,在谷歌浏览器预览,在非手机模式下可以点击显示tooltip提示窗,切换到手机模型下,点击无反应。
以下是涉及的主要代码

<canvas class="block chart-1" canvas-id="chartOne" id="chartOne"></canvas>

import * as echarts from 'echarts'

initChart1 (source) {
	let dom = document.getElementById('chartOne')
	chart1 = echarts.init(dom);
	chart1.setOption({
		tooltip: {
			trigger: 'axis',
			show: true,
			triggerOn: 'click'
		},
		xAxis: {
			type: 'category',
			data: ['2021-1', '2021-2', '2021-3', '2021-4'],
			boundaryGap: false,
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [120, 200, 150, 140],
			type: 'line',
			smooth: true
		}]
	})
}

如果不使用 uni-app 是否正常?
正常放在普通vue项目中在手机模式下也能够正常点击。

相关问题