vue使用antv踩到的坑

使用antv踩到的坑

面积图的纵坐标问题

1.使用antv g2plot 的面积图，纵坐标总是不对，之前以为是自己写的有问题， 结果发现是它这个框架的面积图的框架都有问题（纵坐标是两个面积图的纵坐标之和）

图在ios15及以上的版本不能显示问题

2. 使用antv 画图，结果在移动端的ios15以上图不能显示，总是会刷新页面，后面把图注释之后发现页面可以非常快的加载出来，然后发现可能是自己下载的antv g2plot 的版本较低，需要升级到最新版本， 升级到最新版本图片就能显示了

antv的changeData()使用不生效的问题

1. 使用antv的changeData()不生效，当点击按钮切换数据的时候可以使用antv 的changeData() 方法，但是使用的时候发现使用了该方法不生效。改变不了数据， 后面发现可以将画图的这个事件挂载到this上面，例如需要改变数据的是折线图：
   
   这个时候打印this可以看到line是否挂载在this上面
   
   成功挂载之后就能够使用this.line.changeData(要改变的数据) 使用它了！

antv的渐变色问题

柱状图的渐变, 径向渐变前面是l, 另一种是r

antv 自定义tooltip

  // 自定义的那个tolltip的样式，我这儿是让他的背景是渐变色的,样式的写法都是css的写法
      const divStyle = {
        position: 'absolute', //这个定位是必须要写的， 不然可能会显示不出来
        background: 'linear-gradient(360deg, #286ce9 0%, #01d1ff 100%)', 
        borderRadius: "4px",
        padding: '10px',
        color: '#fff',
        fontSize: '12px',
        listStyle: 'none',
        lineHeight: '16px'
      }
      //循环自己设置的样式，将这些样式全部设置在你创建的那个盒子上面
      const setStyle = (container, styles) => {
        for(const key in styles) {
          container.style[key] = styles[key]
           /* 个人觉得上面这步应该是相当于container.style.key = styles.key，
           就像是container.stye.position = styles.postion == 'absolute' */
        }
      }
      const barPlot = new Column(this.id, {

   columnStyle: {
          fill: "l(255) 0: #030c31 1: #00f6ff"
        },
        // 将自己写的样式之类的引入到tooltip中来
        tooltip: {
          customContent: (value, items) => {
            const tt = document.createElement('ul');
            setStyle(tt, divStyle);
            items.forEach(it => {
              let li = document.createElement('li');
              li.innerHTML = `${it.name}: ${it.value}`
              tt.appendChild(li)
            })
            return tt
          }
        }

用一个总的数据绘制出一条线，但是tooltip显示4个数据

例如数据要求以一个总额画线，但是点击那一条线要显示总额的数值，以及组成总额的a、b、c的值，这个时候就需要将a、b、 c作为总额的子数据，因为一般绘制图形都是传x轴和y轴进来，你在绘制图像的那个页面打印数值也是只能打印出x、y轴的数值，那么怎么让一天线显示4个数据呢？
例如这条数据为：

let total = [
  {
    name: '总额', 
    value: 10,
    //这个children名字可以自己命名成你想命名的键名
    children: [
      {
        name: 'a',
        value: 3
      },
      {
        name: 'b',
        value: 3
      },
      {
        name: 'c',
        value: 4
      },
    ]
  },
   {
    name: '总额', 
    value: 10,
    children: [
      {
        name: 'a',
        value: 3
      },
      {
        name: 'b',
        value: 3
      },
      {
        name: 'c',
        value: 4
      },
    ]
  },
  ...
]

后来通过查询antv的api发现meta里面有一个values的属性，可以枚举出来你想要显示的那个属性， 所以就大胆的尝试了一下，发现当使用了meta的values之后，我在自定义的那个tooltip里面打印items的时候他的data里面就不只有value和name这两个键值对了，还出现了children这个键值对，这样就可以在自定义的tooltip里面自由发挥啦！！！！

 columnStyle: {
          fill: "l(255) 0: #030c31 1: #00f6ff"
        },
        meta: {
          values: 'children' 
          //values 后面的这个children要看你自己在传的那个data里面为你要显示的其他键命名的是什么名字，命名的什么名字就写什么名字
        },

其他的暂时想不起来了，等后面想到了再进行添加