今天有一個需求 是這樣的
柱狀圖：當滑鼠移到 x軸線上 顯示 彈框 内容一
當滑鼠移到柱狀圖上 顯示 彈框 内容二
首先 滑鼠移到 坐标軸線的時候 彈框顯示 的開關
xAxis: {
data: xAxisDatat,
name: '',
silent: false,
axisPointer:{
show:true,
type:'line',
lineStyle:{
color:'#7198d2',
},
triggerTooltip:true,//滑鼠移到坐标軸線上 彈框顯示
label: {
show:true,
fontSize: 12,
formatter:
function (params) {
//這裡顯示的是xAxis.data的内容 會顯示在x軸上方 并不是需求那個彈框
company=params.value
return params.value
}
}
// triggerTooltip:false,
},
axisLabel:{
// interval: 0,// 0 強制顯示所有，1為隔一個标簽顯示一個标簽，2為隔兩個
rotate: -25,//标簽旋轉角度，在标簽顯示不下的時可通過旋轉防止重疊
textStyle: {
fontSize: 10,//字型大小
}
},
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
}, 然後 這裡有兩種顯示方式 内容一和内容二，此時就需要判斷 滑鼠是在 柱狀圖上 還是在 坐标軸線上
var isXLabel=true;
myChartt.on('mousemove', function (params) {
isXLabel=false;
console.log('不線上上')
getChange()
});
myChartt.on('mouseout', function (params) {
isXLabel=true;
console.log('在 線上')
getChange()
}); 改變彈框顯示 也就是 重新渲染 mychart ，這裡 需要重複渲染的原因是 資料 沒有一起給到 ，
如果 資料 比較全面 可以不重新渲染 直接在tooltip 中 進行判斷 顯示
function getChange() {
if(isXLabel){
if (optiont && typeof optiont === "object") {
myChartt.setOption(optiont, true);
}
}else{
myChartt.setOption(optiont_, true);
console.log(3333)
}
} 下面是兩個option的内容
{
backgroundColor: '#fff',
legend: {
//data: ['已付金額', '未付金額'],
data:[
{
name:"已付金額",
},
{
name:"未付金額",
},
{
name:'未付金額'
}
],
selectedMode:false,//取消圖例上的點選事件
align: 'left',
left: 30
},
/* tooltip: {
formatter:function (parm) {
return parm.name +'<br />'+ parm.seriesName +':'+ parm.value
if(parm.value < 0){
return parm.name +'<br />'+ parm.seriesName +':'+ (-parm.value)
}else{
return parm.name +'<br />'+ parm.seriesName +':'+ parm.value
}
}
},*/
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (parm){
//應付 已付 未付 公司
// console.log(parm)
// return parm.name +'<br />'+ parm.seriesName +':'+ parm.value
return '公司:'+company+' <br/>' +
'應付金額:3000' +' <br/>' +
parm[0].seriesName+':'+parm[0].data+' <br/>' +
parm[1].seriesName+':'+parm[1].data+' <br/>'
}
},
xAxis: {
data: xAxisDatat,
name: '',
silent: false,
axisPointer:{
show:true,
type:'line',
lineStyle:{
color:'#7198d2',
},
triggerTooltip:true,//滑鼠移到坐标軸線上 彈框顯示
label: {
show:true,
fontSize: 12,
formatter:
function (params) {
//這裡顯示的是xAxis.data的内容 會顯示在x軸上方 并不是需求那個彈框
company=params.value
return params.value
}
}
// triggerTooltip:false,
},
axisLabel:{
// interval: 0,// 0 強制顯示所有，1為隔一個标簽顯示一個标簽，2為隔兩個
rotate: -25,//标簽旋轉角度，在标簽顯示不下的時可通過旋轉防止重疊
textStyle: {
fontSize: 10,//字型大小
}
},
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {
axisLabel:{
formatter:function (value, index) {
if(value<0){
return -value;
}else{
return value;
}
}
},
/*min:-'dataMax',
max:'dataMax'*/
min:-getMaxMin(data1,data2),
max:getMaxMin(data1,data2)
},
grid: {
left: 75
},
series: [
{
name: '已付金額',
type: 'bar',
stack: 'one',
color:'#7198d2',
itemStyle: itemStylet,
// barCategoryGap:10,
data: data1,
barWidth:15
},
{
name: '未付金額',
type: 'bar',
stack: 'one',
color:'#f09266',
itemStyle: itemStylett,
// barCategoryGap:10,
data: data2
},
{
name: '錯誤金額',
type: 'bar',
stack: 'one',
color:'#e80000',
itemStyle: {
normal: {
barBorderRadius: [0,0,20,20],
}
},
// barCategoryGap:10,
data: data3
}
]
};
var optiont_ = {
backgroundColor: '#fff',
legend: {
//data: ['已付金額', '未付金額'],
data: [
{
name: "已付金額",
},
{
name: "未付金額",
},
{
name: '未付金額'
}
],
selectedMode: false,//取消圖例上的點選事件
align: 'left',
left: 30
},
tooltip: {
formatter: function (parm) {
return parm.name + '<br />' + parm.seriesName + ':' + parm.value
if (parm.value < 0) {
return parm.name + '<br />' + parm.seriesName + ':' + (-parm.value)
} else {
return parm.name + '<br />' + parm.seriesName + ':' + parm.value
}
}
},
xAxis: {
data: xAxisDatat,
name: '',
silent: false,
axisPointer: {
show: true,
type: 'line',
lineStyle: {
color: '#7198d2',
},
triggerTooltip: false,
},
axisLabel: {
// interval: 0,// 0 強制顯示所有，1為隔一個标簽顯示一個标簽，2為隔兩個
rotate: -25,//标簽旋轉角度，在标簽顯示不下的時可通過旋轉防止重疊
textStyle: {
fontSize: 10,//字型大小
}
},
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {
axisLabel: {
formatter: function (value, index) {
if (value < 0) {
return -value;
} else {
return value;
}
}
},
/*min:-'dataMax',
max:'dataMax'*/
min: -getMaxMin(data1, data2),
max: getMaxMin(data1, data2)
},
grid: {
left: 75
},
series: [
{
name: '已付金額',
type: 'bar',
stack: 'one',
color: '#7198d2',
itemStyle: itemStylet,
// barCategoryGap:10,
data: data1,
barWidth: 15
},
{
name: '未付金額',
type: 'bar',
stack: 'one',
color: '#f09266',
itemStyle: itemStylett,
// barCategoryGap:10,
data: data2
},
{
name: '錯誤金額',
type: 'bar',
stack: 'one',
color: '#e80000',
itemStyle: {
normal: {
barBorderRadius: [0, 0, 20, 20],
}
},
// barCategoryGap:10,
data: data3
}
]
}; View Code