krislee94 commented on issue #11376: axisPointer超出图表范围消失 URL: https://github.com/apache/incubator-echarts/issues/11376#issuecomment-540288201 ### eg #### html ``` <html> <head> <style> #main { width: 600px; height: 400px; border: 1px solid red; } </style> </head> <body> <div id="main"></div> </body> </html> ``` #### js ``` var container = document.getElementById('main'); var chart = echarts.init(container); //定义数据 var rowArray = ['2019/10/1','2019/10/2','2019/10/3','2019/10/4','2019/10/5','2019/10/6','2019/10/7','2019/10/8','2019/10/9','2019/10/10','2019/10/11','2019/10/12','2019/10/13']; var ptArray = ['11.11','2.22','3.33','4.44','10.78','8.98','16.66','20.22','23.33','11.89','11.90','22.11','27.99']; var array = []; var title = '测试'; var option = { //是否启用拖拽重计算属性 calculable: true, //鼠标悬浮弹窗 tooltip: { trigger: 'axis', //show: true, //default true showDelay: 0, hideDelay: 0, transitionDuration: 0, //动画变换时长 backgroundColor: 'rgba(255,255,255,1);', borderColor: '#fff', borderRadius: 3, // position:function(p){ // return [p[0],p[1]+20] // }, alwaysShowContent:true, borderWidth: 0, padding: 10, // [5, 10, 15, 20] formatter: function (params, ticket, callback) { var res = "<span style='font-size: 13px;color: #666666;'>" + params[0].name + '</span>'; for (var i = 0, l = params.length; i < l; i++) { if (i == 0) { if (params[i].value.indexOf('-') < 0 && params[i].value != '0.00') { params[i].value = '+' + params[i].value; } res += '<br/>' + "<span style='font-size: 14px;color: #FF9100;'>" + params[i].seriesName + '</span>' + "<span style='font-size: 14px;color: #FF9100;'>" + ' ' + '</span>' + "<span style='font-size: 14px;color: #FF9100;'>" + params[i].value + '%</span>'; } if (i == 1) { if (params[i].value.indexOf('-') < 0 && params[i].value != '0.00') { params[i].value = '+' + params[i].value; } res += '<br/>' + "<span style='font-size: 14px;color: #336EFF;'>" + params[i].seriesName + '</span>' + "<span style='font-size: 14px;color: #336EFF;'>" + ' ' + '</span>' + "<span style='font-size: 14px;color: #336EFF;'>" + params[i].value + '%</span>'; } } return res; }, }, axisPointer: { show: true, type: 'line', z:0, label:{ show:false, }, lineStyle: { color: 'red', width: 1, type: 'dashed' }, }, dataZoom: [ { type: 'inside', xAxisIndex: 0, zoomLock:true, zoomOnMouseWheel: true, moveOnMouseMove: true, preventDefaultMouseMove: true, } ], //{Array | Object} xAxis x轴 xAxis: [ { type: 'category', scale: true, splitNumber: 10, //最大最小间隔 axisLine: { show: true, onZero: true, lineStyle: { color: 'rgba(255,255,255,0.2)', width: 1, type: 'solid' } }, //x轴的小标记，让小标记展示为false axisTick: { show: false, }, //x轴文本 axisLabel axisLabel: { // inside:true, margin: 4, interval: 'auto',//1093,//为0则全部展示 为1 表示相隔一个展示，一次类推 fontFamily:'PingFangSC-Regular', fontSize:10, color:'rgba(255,255,255,0.5)', }, data: rowArray } ], //{Array | Object} yAxis y轴 yAxis: [ { type: "value", axisLine: { show: true, onZero: false, lineStyle: { color: 'rgba(255,255,255,0.1)', width: 0.5, type: 'dashed' } }, // min:0, // max:10, // splitNumber:1, scale: true, // boundaryGap:[0,0.1], axisTick: { show: false, }, axisPointer: { show: false, }, axisLabel: { formatter: '{value} %', fontFamily:'PingFangSC-Regular', margin:10, fontSize:10, color:'rgba(255,255,255,0.5)', }, boundaryGap: ['20%', '20%'], splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.1)', width: 1, type: 'solid', // opacity:0.7, } }, // data:[0,5,10] } ], // 数据{Array} series series: [ { name: '我的配置', type: 'line', smooth: true, dataFilter: 'average', // symbol: 'none', symbol: 'image:///app/account/asset/customize/icons/or-icon.png', showSymbol: false, data: ptArray, // hoverAnimation:false, itemStyle: { normal: { lineStyle: { color: '#fff', type: "solid", width: 2, }, areaStyle: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2c5ef0' // 0% 处的颜色 }, { offset: 0.1, color: '#3d6bf1' // 40% 处的颜色 }, { offset: 1, color: '#4671ec' // 100% 处的颜色 }] ), //背景渐变色 }, }, } }, { name: title, type: 'line', smooth: true, // symbol: 'none', symbol: 'image:///app/account/asset/customize/icons/blue-icon.png', showSymbol: false, dataFilter: 'average', // hoverAnimation:false, data: array, itemStyle: { normal: { lineStyle: { color: 'rgba(255,255,255,0.5)', type: "solid", width: 1, }, emphasis: { borderColor: 'blue' } } }, // markPoint:{ // clickable:true, // symbol:'symbolSize', // symbolSize:'20', // itemStyle:{ // emphasis:{ // borderColor:'blue' // } // } // } } ], // 直角坐标系，内的网格图{Object} grid grid: { backgroundColor: 'rgba(0,0,0,1)', borderWidth: 3, x: '13%', y: '13%', x2: '8%', y2: '8%', } }; chart.setOption(option); ```
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
