echart

1.添加水印， 

echart 示例1：Examples - Apache ECharts

效果图：

echart示例2：Documentation - Apache ECharts

效果图：

2.tooltip 将提示款限制在图表内：

方法一：将tooltip的confine属性的值设为:true,

方法二：设置tooltip的position属性：

position: function (pos, params, dom, rect, size) {

//提示框位置

        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]

        //画布大小

        var viewWidth = size.viewSize[0]

        var viewHeight = size.viewSize[1]

        //当鼠标x坐标+提示框宽度的2倍大于画布宽度时，将提示框放在鼠标的左边

        if((pointX+2*boxWidth) > viewWidth ){

          x = pointX - boxWidth -20

        }else{

          x = pointX+20

        }

        //当鼠标y坐标+提示框高度大于画布高度时，将提示框固定放在画布底部

        console.log((pointY-boxHeight) < 0 );

        if((pointY-boxHeight+20) < 0 ){

        }else{

          y = pointY-boxHeight -20

        }

        return [x,y]

}

3.图标水平对齐，并且长度可控，鼠标悬浮显示全部

 legend: {

      data: legend, //不是必要的

      formatter: function (name: String) {

        if (name.length > props.legendLength) {

          name = name.slice(0, 15) + '...'

        }

        return [`{a|${name}}`].join('\n')

      },

      textStyle: {

        //没有backgroundColor 无法设置宽高

        backgroundColor: 'transparent',

        rich: {

          a: {

            width: props.legendWidth,

            overflow: 'hidden'

          }

        }

      },

      tooltip: {

        show: true

      }

    },