问题： echarts 5.4.0 option配置了 trigger: ‘axis’， 但是 tooltip 显示不出来
tooltip: {
trigger: 'axis'
},
// 定义了一个全局的响应式变量，用于接收echarts实例
export default {
name: "echarts",
data() {
return {
chart1: null,
};
},
methods: {
// 折线图
initChartLine() {
const labelData = [];
const valueData = [];
this.lineData.forEach(item=>{
labelData.push(item.label)
valueData.push(item.value)
})
this.chart1 = echarts.init(document.getElementById(this.id))
const option = {
title: {
show: false,
},
tooltip: {
show: true,
trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
},
grid: {
left: '5%', // 距离左边的距离
right: '0%', // 距离右边的距离
top: '20%', // 距离顶部的距离
bottom: '16%' // 距离底部的距离
},
xAxis: {
type: 'category', // x轴类型为类目轴
// boundaryGap: false, // 取消x轴两端空白
// data: labelData, //['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
data: ['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
axisTick: {
show: false, // 不显示刻度
},
axisLabel: { //x轴文字的配置
color: "#353535", //X轴内容文字颜色
interval: 'auto', // 可以设置为具体的数字，如 5，表示显示每隔 5 个标签
},
axisLine: {
lineStyle: {
color: '#EFF1F3' // x轴线的颜色
}
},
splitLine: {
// 纵向分割线
show: false,
lineStyle: {
color: '#EFF1F3'
}
}
},
yAxis: {
type: 'value', // y轴类型为数值轴
// name: '单位：斤/元', //单位
nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
//单位的样式设置
nameTextStyle: {
color: "#C3D5E9", //颜色
padding: [0, 20, 0, 40], //间距分别是 上 右 下 左
fontSize: 14,
},
axisLabel: { //y轴文字的配置
color: "#999999", //Y轴内容文字颜色
formatter: function (value) {
return value + '%'
}
},
axisLine: { //y轴线的配置
show: true, //是否展示
lineStyle: {
color: "#EFF1F3", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
},
axisTick: {
show: false // y轴上的小横线
},
// 横向分割线
splitLine: {
show: true, // 显示分割线。
lineStyle: {
// 分割线样式。
color: '#EFF1F3', // 分割线颜色。
type: 'solid' // 分割线类型。 solid实线 dotted点型虚线 dashed线性虚线
}
},
// splitNumber: 2, // 指定横向分割线的数量
},
// 图例
legend: {
// data: ['数据一'],
left: 'center',
top: 'top',
textStyle:{
color: '#fff',
fontSize: '16px'
}
},
series: [
{
type: 'line', // 图表类型为折线图
// name: '数据一',
// data: valueData, //[40, 60, 20, 120, 60, 70], // 折线图数据
data: [40, 60, 20, 12, 60, 70], // 折线图数据
smooth: false, // 平滑曲线
// 区域颜色渐变
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "RGBA(235, 242, 255, .9)",
},
{
offset: 1,
color: "RGBA(235, 242, 255, .5)",
},
], false
),
},
// 折线颜色
lineStyle: {
color: "#3F9DFF",
width: 4,
},
color: "#3F9DFF", //拐点颜色
symbol: 'circle', // 设置拐点形状、
symbolSize: 6, // 设置拐点大小+
// 拐点处显示值
itemStyle : {
normal: {
label : {
show: false,
position: 'top',
color: '#333',
fontSize: 16,
formatter: function (data) {
return data.value + '%'
}
}
},
},
}],
}
this.chart1.setOption(option)
},
}
}
是因为 echarts赋值给响应式数据，导致tooltip不显示
解决办法：要用普通变量来接收 echarts 实例
// 定义普通变量来接收实例
let chart1 = null;
// 定义了一个全局的响应式变量，用于接收echarts实例
export default {
name: "echarts",
data() {
return {
};
},
methods: {
// 折线图
initChartLine() {
const labelData = [];
const valueData = [];
this.lineData.forEach(item=>{
labelData.push(item.label)
valueData.push(item.value)
})
this.chart1 = echarts.init(document.getElementById(this.id))
const option = {
title: {
show: false,
},
tooltip: {
show: true,
trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
},
grid: {
left: '5%', // 距离左边的距离
right: '0%', // 距离右边的距离
top: '20%', // 距离顶部的距离
bottom: '16%' // 距离底部的距离
},
xAxis: {
type: 'category', // x轴类型为类目轴
// boundaryGap: false, // 取消x轴两端空白
// data: labelData, //['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
data: ['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
axisTick: {
show: false, // 不显示刻度
},
axisLabel: { //x轴文字的配置
color: "#353535", //X轴内容文字颜色
interval: 'auto', // 可以设置为具体的数字，如 5，表示显示每隔 5 个标签
},
axisLine: {
lineStyle: {
color: '#EFF1F3' // x轴线的颜色
}
},
splitLine: {
// 纵向分割线
show: false,
lineStyle: {
color: '#EFF1F3'
}
}
},
yAxis: {
type: 'value', // y轴类型为数值轴
// name: '单位：斤/元', //单位
nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
//单位的样式设置
nameTextStyle: {
color: "#C3D5E9", //颜色
padding: [0, 20, 0, 40], //间距分别是 上 右 下 左
fontSize: 14,
},
axisLabel: { //y轴文字的配置
color: "#999999", //Y轴内容文字颜色
formatter: function (value) {
return value + '%'
}
},
axisLine: { //y轴线的配置
show: true, //是否展示
lineStyle: {
color: "#EFF1F3", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
},
axisTick: {
show: false // y轴上的小横线
},
// 横向分割线
splitLine: {
show: true, // 显示分割线。
lineStyle: {
// 分割线样式。
color: '#EFF1F3', // 分割线颜色。
type: 'solid' // 分割线类型。 solid实线 dotted点型虚线 dashed线性虚线
}
},
// splitNumber: 2, // 指定横向分割线的数量
},
// 图例
legend: {
// data: ['数据一'],
left: 'center',
top: 'top',
textStyle:{
color: '#fff',
fontSize: '16px'
}
},
series: [
{
type: 'line', // 图表类型为折线图
// name: '数据一',
// data: valueData, //[40, 60, 20, 120, 60, 70], // 折线图数据
data: [40, 60, 20, 12, 60, 70], // 折线图数据
smooth: false, // 平滑曲线
// 区域颜色渐变
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "RGBA(235, 242, 255, .9)",
},
{
offset: 1,
color: "RGBA(235, 242, 255, .5)",
},
], false
),
},
// 折线颜色
lineStyle: {
color: "#3F9DFF",
width: 4,
},
color: "#3F9DFF", //拐点颜色
symbol: 'circle', // 设置拐点形状、
symbolSize: 6, // 设置拐点大小+
// 拐点处显示值
itemStyle : {
normal: {
label : {
show: false,
position: 'top',
color: '#333',
fontSize: 16,
formatter: function (data) {
return data.value + '%'
}
}
},
},
}],
}
this.chart1.setOption(option)
},
}
}
