echart 属性设置, 1.legend 间隙,2.延长线的长度,3.鼠标悬停tooltip显示内容的位置自适应

1、legend

legend: {
itemGap: 25, // 间隙
y:‘center’, // 垂直居中
}

2、延长线的长度

series: [{
labelLine: {//设置延长线的长度
normal: {
length: 5,//设置延长线的长度
}
}
}]

3、鼠标悬停tooltip显示内容的位置自适应

tooltip: {
          borderWidth: 0,
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          },
        },

4、地图点击每一块区域事件

// 外面div定义方法，点击外面事件
out() {
      console.log('out')
      console.log(this.isBlank)
      if (this.isBlank) {
        this.getCoordinates()
      }
      this.isBlank = true
    },
    childClick() {
      this.projectVisible = true
    },
    clickChart(e) {
      this.isBlank = false
      var chooseName = this.mapJson.filter(item => {
        return item.name == e.name
      })
      // if (!chooseName.length === 0 ) {
      //   this.mapname = chooseName[0].json
      // } else {
      //   return
      // }
      // this.map = this.mapJson.bjx
      this.map = chooseName[0].json
      // this.mapType = 'pyq'
      // this.orgUnitName = '番禺区'
      // var citys = this.allData.citys.filter(item => {
      //   return item.area === e.name
      // })
      var citys = this.allData.citys.filter(item => {
        return item.area === e.name
      })
      this.allData = { citys }
      this.initChart()
    },

5.透明度

normal: {
opacity: 1,
}

5.hover样式

//基本样式
itemStyle : {
    normal : {
        lineStyle:{
            width:2,//折线宽度
            color:"#FF0000"//折线颜色
        }
    }
},
grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
   left: '20px',
   right: '20px',
   bottom: '10%',
   containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
//hover样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/9f43b72c7a8a44328c642a3ac2eb4ab6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phY2tfcm9zZV9tZQ==,size_16,color_FFFFFF,t_70)

emphasis: {
  // 鼠标hover上去的时候，拐点的颜色和样式
  itemStyle: {
      color: '#fff', //颜色
      borderColor: '#0072FF', //图形的描边颜色
      borderWidth: 2, // 描边的线宽
      shadowBlur: 1, // 图形的阴影大小
      shadowColor: '#0072FF', // 图形的阴影颜色
  },
},