F2 可视化方案 折线图 和 曲线图

F2 文档

ui 组件中集成了 F2 移动端可视化方案
文档中写了俩个简单的 折线图和曲线图的 demo
具体需要使用查看F2 的官方文档

• F2 快速上手
• F2 示例 Demo

效果展示

代码示例

<template>
  <div>
    <canvas id="brokenLine" height="260"></canvas>
    <br/><br/><br/>
    <canvas id="brokenLine2" height="260"></canvas>
  </div>
</template>
<script>
import F2 from '@antv/f2'
export default {
   created() {
    this.$nextTick(() => {
      this.setNavbar(); // 设置topbar
      // 画折线图
      this.playBrokenLine();
      // 画曲线图
      this.playCurve();
    });
  },
  data () {
    return {
      list: [{
        day: '周一',
        value: 300
      }, {
        day: '周二',
        value: 400
      }, {
        day: '周三',
        value: 350
      }, {
        day: '周四',
        value: 500
      }, {
        day: '周五',
        value: 490
      }, {
        day: '周六',
        value: 600
      }, {
        day: '周日',
        value: 900
      }],
      list2: [{
        time: '2016-08-08 00:00:00',
        tem: 10
      }, {
        time: '2016-08-08 00:10:00',
        tem: 22
      }, {
        time: '2016-08-08 00:30:00',
        tem: 20
      }, {
        time: '2016-08-09 00:35:00',
        tem: 26
      }, {
        time: '2016-08-09 01:00:00',
        tem: 20
      }, {
        time: '2016-08-09 01:20:00',
        tem: 26
      }, {
        time: '2016-08-10 01:40:00',
        tem: 28
      }, {
        time: '2016-08-10 02:00:00',
        tem: 20
      }, {
        time: '2016-08-10 02:20:00',
        tem: 18
      }]
    }
  },
  methods: {
    setNavbar(){
      AI.setNavbar({
        title: 'F2折线图', 
      })
    },
    // 画折线图
    playBrokenLine() {
      var chart = new F2.Chart({
        id: 'brokenLine',
        pixelRatio: window.devicePixelRatio
      });
      chart.source(this.list, {
        value: {
          tickCount: 5,
          min: 0
        },
        day: {
          range: [0, 1]
        }
      });
      chart.tooltip({
        showCrosshairs: true,
        showItemMarker: false,
        onShow: function onShow(ev) {
          var items = ev.items;
          items[0].name = null;
          items[0].value = '$ ' + items[0].value;
        }
      });
      chart.axis('day', {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          return textCfg;
        }
      });
      chart.line().position('day*value');
      chart.point().position('day*value').style({
        stroke: '#fff',
        lineWidth: 1
      });
      chart.render();
    },
    // 绘制曲线图
    playCurve() {
      var chart = new F2.Chart({
        id: 'brokenLine2',
        pixelRatio: window.devicePixelRatio
      });
      var defs = {
        time: {
          type: 'timeCat',
          mask: 'MM/DD',
          tickCount: 3,
          range: [0, 1]
        },
        tem: {
          tickCount: 5,
          min: 0,
          alias: '日均温度'
        }
      };
      chart.source(this.list2, defs);
      chart.axis('time', {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          return textCfg;
        }
      });
      chart.tooltip({
        showCrosshairs: true
      });
      chart.line().position('time*tem').shape('smooth');
      chart.point().position('time*tem').shape('smooth').style({
        stroke: '#fff',
        lineWidth: 1
      });
      chart.render();
    }
  }
}
</script>
<style>
#brokenLine, #brokenLine2{
  width: 100%;
}
</style>