echart-悬浮框-初探

今天有一个需求 是这样的

柱状图：当鼠标移到 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的内容

    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
                        }
                    }
                },*/
                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
                    }
                ]
            };