1.问题描述
项目开发过程中，echarts图中series内有不同类型的数据，想对不同类型数据单独设置tooltip，发现提示框不生效。
2.原因说明
-
原因1：单独设置不生效可能在主体部分没有先给出tooltip的设置，若下图中的位置没有先设定好tooltip，单独设置tooltip的时候也无法生效。
-
原因2：一般单独设置tooltip都是在series中对每个type的数据进行设置，但是设置过程中tooltip中需要注意trigger必须为’item’，否则不生效，官方文档有说明如下：
series外的主体部分设置tooltip.show为false是因为主体的样式可能会影响后续单独样式的设置，因此我设置为false，后续series内的tooltip需要设置为serier.tooltip.show为true。
3.完整代码案例实现
<template>
<div>
<div ref="chart" id="lineChart" style="height: 400px; width: 800px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'; // 引入echarts, * as echarts 表示引入所有的方法
export default {
data() {
return {
chart: null,
dialogVisible: false,
tipTitle: null
}
},
mounted() {
this.init()
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart);
// 绘制图表
const option = {
tooltip: {
// 在主体中定义 tooltip
show: false, // 不显示tooltip
trigger: 'none', // 去除默认的 'axis' 触发方式
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'scatter',
type: 'scatter',
tooltip: {
show: true, //此处由于前面定义了全局的tooltip,所以这里必须设置为true才能生效
trigger: 'item', // 单独设置样式时必须为item才能生效
backgroundColor: 'rgba(110, 112, 121, 0.9)', //对该系列数据单独设置tooltip背景颜色
formatter: (params) => {
console.log('params-->>',params);
return params.seriesName + '<br/>' + params.data[0] + ' : ' + params.data[1];
},
textStyle: {
color: '#fff'
}
},
data: [
[0, 1],
[1, 5],
[2, 3],
[3, 4],
[4, 2],
[5, 8],
[6, 6]
]
}, {
name: 'line',
type: 'line',
tooltip: {
show: true,
trigger: 'item',
},
data: [1, 3, 2, 5, 4, 6, 8]
}]
};
this.chart.setOption(option);
},
}
}
</script>