vue AntV F2 柱状图使用（左右滑动、柱状图大小、柱状图颜色）

效果图

let data = [{     // 定义一些数据

    date: '2018-05-01',

     steps: 100

    },

    {

    date: '2018-05-02',

      steps: 320

    },

    {

    date: '2018-05-03',

      steps: 130

    },

    {

    date: '2018-05-04',

      steps: 840

    },

    {

    date: '2018-05-05',

      steps: 450

    },

    {

    date: '2018-05-06',

      steps: 160

    },

    {

    date: '2018-05-07',

      steps: 470

    },

    {

    date: '2018-05-08',

      steps: 780

    },

    {

    date: '2018-05-09',

      steps: 990

    }

  ]

    var originDates = [ '2018-05-01', '2018-05-02', '2018-05-03', '2018-05-04', '2018-05-05']; // 这里是柱状图显示的数据的长度，多余的通过滑动来显示，

    var chart = new F2.Chart({

      id: 'mountNode',

      pixelRatio: window.devicePixelRatio

    });

    chart.source(data, {

      date: { 

        type: 'cat',

        tickCount: 5,

        values: originDates

      },

      steps: { 

        tickCount: 5

      }

    });

    chart.axis('date', { // 横坐标样式

      tickLine: { // 横坐标名字上面那个突出的小线段

        length: 4,

        stroke: '#cacaca'

      },

      label: {

        fill: '#cacaca' // 字体颜色

      },

      line: {

        top: true

      }

    });

    chart.axis('steps', {

      position: 'left', // 纵坐标位置

      label: function label(text) {

        return {

          text: text,

          fill: '#cacaca'

        };

      },

      grid: {

        stroke: '#d1d1d1'

      }

    });

  chart.legend(false) // 是否显示图例

    chart.interval().position('date*steps').style({ // style:柱状图样式

      radius: [2, 2, 0, 0]

    }).size(30).color('date',['#257dd7','#d66b2a']) // size: 每个柱状图的宽度，color:柱状图的颜色

    // 定义进度条

    chart.scrollBar({  // 滑动条 ：可以加if判断，数据少就不用显示

      mode: 'x',

      xStyle: {

        backgroundColor: '#e8e8e8',

        fillerColor: '#808080',

        offsetY: -2

      }

    });

    chart.interaction('pan');

    chart.render();