viser的x轴文字太长想划过再显示全部怎么办

最近真是跟viser干上了，垃圾框架，文档写的不明不白，偏偏我们领导又提出奇葩需求，让x轴文字太长的时候划过再显示全部，我研究了一天，终于搞明白了。

本来以为都是canvas画出来的，没办法加mousemove实践，搜了一下可以加useHtml属性配合label的htmlTemplate使用，于是就加上了：

dataKey="x"不能不写，表示你要操作x轴。

<v-axis :useHtml="true" dataKey="x" :label="axisLabel" />

axisLabel: {
        htmlTemplate: (text, item, index) => {
          var content = text.length > 10 ? text.substr(0, 10) + '...' + '' : text
          return (
            '<div class="x-content" style="width:150px;font-size:12px" data-text="' + text + '">' + content + '</div>'
          )
        },
      },

我试了一下直接在这上面绑事件总是不成功，于是只能换个笨方法，用js循环绑定事件：

var nodes = document.getElementsByClassName('x-content')
      function bindFun(dom) {
        dom.onmousemove = function (e) {
          if(e.target.innerHTML.length>10){
            document.getElementById('tool').style.left = e.x + 'px'
            document.getElementById('tool').style.top = e.y + 'px'
            document.getElementById('toolText').innerHTML = e.target.dataset.text
            document.getElementById('tool').style.display = 'block'
            console.log(document.getElementById('toolin').clientHeight,document.getElementById('toolin').clientWidth)
            document.getElementById('toolin').style.top = -(document.getElementById('toolin').clientHeight+10) + 'px'
            document.getElementById('toolin').style.left = -document.getElementById('toolin').clientWidth/2 + 'px'
          }
          
        }
      }
      for (var i = 0; i < nodes.length; i++) {
        bindFun(nodes[i])
      }

下面这段是用来显示名称全部的html，可以按照自己需求弄，我这是直接拉来的antd的气泡卡片组件的代码：

<div style="position:fixed;min-width:100px;width:130px" id="tool">
      <div style="position:relative">
        <div ref="tool" id="toolin" class="ant-popover ant-popover-placement-top" style="position:absolute;width:100%">
          <div class="ant-popover-content">
            <div class="ant-popover-arrow"></div>
            <div role="tooltip" class="ant-popover-inner">
              <div>
                <div class="ant-popover-inner-content">
                  <a id="toolText"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

现在显示做好啦，鼠标离开让它隐藏掉你应该会吧，方法应该有好几种，我就不贴啦（其实我是给<v-chart>组件的mousemove事件里操作让显示框隐藏的）

ok，这样就搞定了，效果就是这样：

优化了一下，不再固定显示字数了，根据文档宽度来计算div宽度，然后溢出隐藏，但是这种方法的话只能让所有的div滑过都显示小弹窗了：

htmlTemplate: (text, item, index) => {
          var wid = document.documentElement.clientWidth || document.body.clientWidth
          //只是一个大概的数值，因为目前是每页十个
          var strwid = wid/14
          return (
            '<div class="x-content" style="width:'+strwid+'px;font-size:12px;text-align:center;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;" data-text="' + text + '">' + text + '</div>'
          )
        },

为了适配移动端（虽然我也知道这个不适合放到移动端，但是领导发话了），又增加了touchstart（用来显示弹窗）和touchend（用来隐藏弹窗）事件。

然后因为每页十个在移动端太挤了，就换成每页5个了，x轴div的宽度也根据这个做了判断和调整。

and，canvas左边空白太多了，又给v-chart加了个属性padding。

:padding="[10,10,80,30]"，顺序也是上右下左。这个属性不支持百分比，只能是数字。