echarts图笔记

调整echarts里提示框的位置
tooltip : {
trigger : 'axis',
position : function(pos, params, dom, rect, size) {
// 
var obj = {
top : '10%'
};

if (pos[0] > size.viewSize[0] / 4 * 3) {//鼠标位置大于屏幕宽度4分之三
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 6;
} else if (pos[0] >= size.viewSize[0] / 2
&& pos[0] < size.viewSize[0] / 4 * 3) {
//largethan equals one half and less than 3/4
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 7;
} else {
obj[[ 'left', 'right' ][+(pos[0] > size.viewSize[0] / 2)]] = pos[0];
}
return obj;
},
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
}
}


通过设置itemStyle 进行调整


      /* 取消饼图只是线和文字 */
      itemStyle : {
          normal : {
              label : {
                  show : false
               },
          labelLine : {
           show : false
              }
            },
              emphasis : {
           label : {
             show : false
            },
          labelLine : {
            show : true
           }
          }
      }


调整grid: 图显示比例


grid: {
    top:'17%',
left:'17%',
right:'17%',
       containLabel: false
   },






折现区域图配置信息


option = {
         tooltip : {
             trigger: 'axis',
             position : function(pos, params, dom, rect, size) {
      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
      var obj = {
      top : '10%'
      };
     
      if (pos[0] > size.viewSize[0] / 4 * 3) {//鼠标位置大于屏幕宽度4分之三
      obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 6;
      } else if (pos[0] >= size.viewSize[0] / 2
      && pos[0] < size.viewSize[0] / 4 * 3) {
      //largethan equals one half and less than 3/4
      obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 7;
      } else {
      obj[[ 'left', 'right' ][+(pos[0] > size.viewSize[0] / 2)]] = pos[0];
      }
      return obj;
      },
      axisPointer : {
      type : 'line',
      crossStyle : {
      color : '#999'
      }
      }
      },
        /*  legend: {
             data:['活跃']
         }, */
         grid:{
      top:'17%',
      left:'10%',
      right:'10%'
      },
         xAxis : [
             {
                 type : 'category',
                 boundaryGap : false,
                 /* 字体颜色  大小*/
                 axisLabel: {
                     show: true,
                     textStyle: {
                         color: '#8E9091'                
                     },
                 },
                /* X轴颜色  大小 */
                 axisLine:{  
                     lineStyle:{  
                         color:'#8E9091',  
                         width:2  
                     }  
            },  
                 data : <!--数据-->
             }
         ],
         yAxis : [
             {
              /* 字体颜色  大小 */
              axisLabel: {
                     show: true,
                     textStyle: {
                         color: '#8E9091'                
                     },
                 },
                 /* y轴颜色  大小 */
                axisLine:{  
                     lineStyle:{  
                         color:'#8E9091',  
                         width:2  
                     }  
            },  
            /* 线条颜色  大小*/
            splitLine: {
                         lineStyle: {
                             // 使用深浅的间隔色
                              width:0.5  ,
                             color: ['#B8C6D9']
                         }
                     },   
                 type : 'value'
             }
         ],
         series : [
            
             {
                 name:'活跃',
                 type:'line',
                 label: {
                     normal: {
                         show: true,
                         position: 'top'
                     }
                 },
                 /* 填充颜色*/
                 areaStyle: {normal: {color:'#D8D6F9'}},
                 /* 线条颜色 */
                 itemStyle:{  
                     normal:{  
                         color:'#aa81f3' 
                     }                                    
                 },        
                 data:<!--数据-->
             }
         ]
      };