vu+antvF2双折线图平移

chart文件（runChart.js）

import * as F2 from '@antv/f2/lib'
require('@antv/f2/lib/interaction/')

/**
 *
 * @param {*} id
 * @param {*} data
 */
function draw(id, data) {
  const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
  var chart = new F2.Chart({
    id: id,
    pixelRatio: window.devicePixelRatio,
    plugins: ScrollBar
  })

  var dates = [];
  data.forEach(function(obj) {
    dates.push(obj.date)
  })
  var newArr = dates.reduce((pre, cur) => {
    if (!pre.includes(cur)) {
      return pre.concat(cur)
    } else {
      return pre
    }
  }, [])
  chart.source(data, {
    date: {
      type: 'timeCat',
      mask: 'MM-DD',
      range: [0, 1],
      values: newArr.slice(0, 7)
    }
  })
  ![chart.tooltip({
    custom: true, // 自定义 tooltip 内容框
    onChange: function(obj) {
      const legend = chart.get('legendController').legends.top\[0\]; // 获取 legend
      const tooltipItems = obj.items;
      const legendItems = legend.items;
      const map = {};
      legendItems.map(item => {
        map\[item.name\] = F2.Util.mix({}, item);
      });
      tooltipItems.map(item => {
        const { name, value } = item;
        if (map\[name\]) {
          map\[name\].value = value;
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide() {
      const legend = chart.get('legendController').legends.top\[0\];
      legend.setItems(chart.getLegendItems().country);
    }
  });
  chart.line().position('date*value').color('type')
  chart.point().position('date*value').style({
    lineWidth: 1,
    stroke: '#fff'
  })
  chart.interaction('pan')
  // 定义进度条
  chart.scrollBar({
    mode: 'x',
    xStyle: {
      offsetY: 0
    }
  })](https://img-blog.****img.cn/20190327163005360.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNTQzOQ==,size_16,color_FFFFFF,t_70)

  chart.render()
  return chart
}

export default draw

页面中引用

 <canvas id='chartId'></canvas>

import runChartfrom './chart/runChart'
const data = [
	{
		date: '2019-03-22',
		type: 'type1',
		value: 100
	}, {
		date: '2019-03-22',
		type: 'type2',
		value: 80
	}, {
		date: '2019-03-23',
		type: 'type1',
		value: 87
	}, {
		date: '2019-03-23',
		type: 'type2',
		value: 93
	}
]
this.loanTrendObj = runChart('chartId', data)

结果