1. 問題の説明
プロジェクト開発プロセス中、echarts グラフの系列にはさまざまな種類のデータが存在します。さまざまな種類のデータに対して個別にツールヒントを設定したいのですが、プロンプト ボックスが有効になりません。
2. 理由の説明
-
理由 1: 個別設定が反映されない 本編でツールチップの設定がされていない可能性があります 下図の位置にツールチップが設定されていないと、ツールチップを設定しても反映されません別々に。
-
理由 2: 通常、ツールチップを個別に設定すると、一連の各タイプのデータが設定されますが、設定プロセス中に、トリガーがツールチップの「項目」である必要があることに注意する必要があります。そうしないと有効になりません。公式ドキュメントでは次のように説明されています。 シリーズ外の本体の
部分のtooltip.showをfalseに設定しているのは、本体のスタイルが後続の個別スタイルの設定に影響を与える可能性があるため、falseに設定し、ツールチップを後続のシリーズは 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>