You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2019/10/07 10:51:42 UTC

[GitHub] [incubator-echarts] krislee94 commented on issue #11371: axisPointer拖拽不跟随手势移动问题

krislee94 commented on issue #11371: axisPointer拖拽不跟随手势移动问题
URL: https://github.com/apache/incubator-echarts/issues/11371#issuecomment-538949355
 
 
   ### 设置的option如下
   
   ```
   var option = {
                               animationDuration:0,
                               animationDurationUpdate:0,
                               animationDelayUpdate:0,
                               //鼠标悬浮弹窗
                               tooltip: {
                                   trigger: 'axis', 
                                   // 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]
                                   // },
                                   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: #336EFF;'>" +
                                                   params[i].seriesName +
                                                   '</span>' + "<span style='font-size: 14px;color: #336EFF;'>" +
                                                   '   ' + '</span>' +
                                                   "<span style='font-size: 14px;color: #336EFF;'>" +
                                                   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: #FF9100;'>" +
                                                   params[i].seriesName +
                                                   '</span>' + "<span style='font-size: 14px;color: #FF9100;'>" +
                                                   '   ' + '</span>' +
                                                   "<span style='font-size: 14px;color: #FF9100;'>" +
                                                   params[i].value + '%</span>';
                                           }
   
                                       }
                                       return res;
                                   },
                                   triggerOn: 'mousemove',
                                   //坐标轴指示器
                                   axisPointer: {
                                       type: 'line',
                                       snap: true,
                                       label: {
                                           show: false,
                                       },
                                       lineStyle: {
                                           color: '#fff',
                                           width: 1,
                                           type: 'dashed'
                                       },
                                       
                                   },
                               },
   
                               //{Array | Object} xAxis x轴
                               xAxis: [
                                   {
                                       type: 'category',
                                       boundaryGap: false, //默认为true留空,false则顶头
                                       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: {
                                           margin: 6,
                                           interval: number,//1093,//为0则全部展示 为1 表示相隔一个展示,一次类推
                                           // rotate:90, 文字旋转角度
                                           textStyle: {
                                               color: 'rgba(255,255,255,0.2)',
                                               fontSize: 10,
                                           },
                                       },
                                       //分割线
                                       splitLine: {
                                           show: true,
                                           onGap: false,
                                           lineStyle: {
                                               color: 'rgba(255,255,255,0.1)',
                                               width: 1,
                                               type: 'dashed'
                                           }
                                       },
                                       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'
                                           }
                                       },
                                       axisTick: {
                                           show: false,
                                       },
                                       axisLabel: {
                                           formatter: '{value} %',
                                           textStyle: {
                                               color: '#7d9ff7'
                                           }
                                       },
                                       axisPointer: {
                                           show: false,
                                       },
   
                                       splitLine: {
                                           show: true,
                                           onGap: false,
                                           lineStyle: {
                                               color: 'rgba(255,255,255,0.1)',
                                               width: 1,
                                               type: 'solid'
                                           }
                                       }
   
                                   }
                               ],
                               // 数据{Array} series
                               series: [
                                   {
                                       name: _this.typeText2 + '配置',
                                       type: 'line',
                                       // symbol: 'none',
                                       symbol: 'image:///app/account/asset/customize/icons/blue-icon.png',
                                       showSymbol: false,
                                       symbolSize: 4,
                                       symbolKeepAspect: true,
                                       data: ptArray,
                                       smooth:true,
                                       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',
                                       // symbol: 'none',
                                       symbol: 'image:///app/account/asset/customize/icons/or-icon.png',
                                       showSymbol: false,
                                       symbolSize: 4,
                                       symbolKeepAspect: true,
                                       data: array,
                                       smooth:true,
                                       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%',
                               }
                           };
   
   ```

----------------------------------------------------------------
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:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org