1. Problem description
During the project development process, there are different types of data in the series in the echarts graph. I want to set tooltips for different types of data separately, but the prompt box does not take effect.
2. Reason explanation
-
Reason 1: The separate setting does not take effect. It is possible that the tooltip setting is not given in the main part. If the tooltip is not set in the position in the figure below, it will not take effect when the tooltip is set separately.
-
Reason 2: Generally, setting tooltip separately is to set the data of each type in the series, but during the setting process, you need to pay attention to the trigger must be 'item' in the tooltip, otherwise it will not take effect. The official document has the following explanation: The main body outside the
series Part of setting tooltip.show to false is because the style of the main body may affect the setting of subsequent individual styles, so I set it to false, and the tooltip in the subsequent series needs to be set to true.
3. Complete code case implementation
<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>