关于antv-f2如何使用在折线图上显示默认

最新推荐文章于 2024-08-23 11:53:33 发布

置顶 beichen3997

最新推荐文章于 2024-08-23 11:53:33 发布

阅读量1.9k

点赞数 1

分类专栏： f2 文章标签： antv f2

本文链接：https://blog.csdn.net/beichen3997/article/details/108831012

版权

f2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.在图标渲染完成后，我们需要展示一些默认数据，此时请看代码

2.在图表上进行快速滑动的时候，上图中的红框中的竖线就会不展示，此时就会使用chart.tooltip中的onHide方法来进行当前滑动位置默认展示

 getDafault(chart,data){
        
        let  tooltip= {showTitle: false,custom: true,
          showCrosshairs: true,
          def_item: data} 
          chart.tooltip(tooltip);
            setTimeout(() => { 
            if (tooltip.def_item) {
              let item = tooltip.def_item; // 要展示 tooltip 的数据
              let point = chart.getPosition(item); // 获取该数据的画布坐标
              console.log(point,'ssssssssssssssssssss')
              chart.showTooltip(point); 
            } 
          },0)
      },
 //设置弹窗
      setTootips(chart){
        let _that=this
           chart.tooltip({
            showCrosshairs: true,
            custom: true, // 自定义 tooltip 内容框
            triggerOn: [ 'touchstart', 'touchmove' ],
            onShow:function (obj) {
              console.log(obj,'ceshiBBBBBBBBBBBBBBBBBBBBBBBB')
              // obj: { x, y, title, items }
            }, // tooltip 显示时的回调函数
            onChange: function onChange(obj) {
              console.log(obj,'ceshi')
              _that.fastDefaut=obj.items[0].origin
              // const legend = chart.get('legendController').legends.top[0];
              const tooltipItems = obj.items;
              _that.title=obj.items[0].origin.dataDate
              // _that.dataList=obj.items.slice(0,2)
              // const legendItems = legend.items;
              const map = {};
              // legendItems.forEach(function(item) {
              //   map[item.name] = _.clone(item);
              // });
              _that.colorList.map((item,index)=>{
               if(index==0){
                 _that.$set(item,'value',tooltipItems[0].value)
                //  _that.$set(item,'title',tooltipItems[0].value)
                 _that.$set(item,'origin',tooltipItems[0].origin)
               }else if(index==1){
                _that.$set(item,'value',tooltipItems[1].value)
                _that.$set(item,'origin',tooltipItems[0].origin)
               }
                return item
              })
              console.log(_that.colorList,'_that.colorList')
              tooltipItems.forEach(function(item) {
                const name = item.name;
                const value = item.value;
                if (map[name]) {
                  map[name].value = value;
                }
              });
               console.log(_that.colorList,'_that.colorList',map,tooltipItems)
              // legend.setItems(_.values(map));
            },
            onHide: function onHide() {
              // const legend = chart.get('legendController').legends.top[0];
              // legend.setItems(legendItems);
              // 当进行快速滑动推进的时候要进行再次定位，恢复到默认展示
              if(_that.fastDefaut){
                // chart.getPosition()
                 _that.getDafault(chart,_that.fastDefaut)
              }
              
            }
          });
         
      },