F2 可视化方案 柱状图

F2 文档

  1. ui 组件中集成了 F2 移动端可视化方案
  2. 文档中写了俩个简单的 柱状图的 demo
  3. 具体需要使用查看F2 的官方文档

效果展示

F2 可视化方案 柱状图 - 图1

代码示例

  1. <template>
  2.   <div>
  3.     <canvas id="myChart" height="260"></canvas>
  5.     <br/><br/><br/><br/>
  7.     <canvas id="mountNode" height="260"></canvas>
  8.   </div>
  9. </template>
  10. <script>
  11. import F2 from '@antv/f2'
  12. console.log(F2, '**')
  13. export default {
  14.   components: {
  16.   },
  17.   computed: {
  18.     styles () {
  19.       return {
  20.         marginTop: '10px',
  21.         borderRadius: '4px',
  22.         minHeight: '36px',
  23.         background: '#d3dce6'
  24.       }
  25.     }
  26.   },
  27.   created() {
  28.     console.log('this.$route.query：', this.$route.query);
  29.     this.$nextTick(() => {
  30.       this.setNavbar(); // 设置topbar
  32.       // 绘制柱形图
  33.       this.playMyChart();
  35.       this.playOtherChart();
  37.     });
  38.   },
  39.   data () {
  40.     return {
  41.       list: [
  42.         { genre: 'Sports', sold: 275 },
  43.         { genre: 'Strategy', sold: 115 },
  44.         { genre: 'Action', sold: 120 },
  45.         { genre: 'Shooter', sold: 350 },
  46.         { genre: 'Other', sold: 150 },
  47.       ],
  48.       list2: [{
  49.         year: '1951 年',
  50.         sales: 38
  51.       }, {
  52.         year: '1952 年',
  53.         sales: 52
  54.       }, {
  55.         year: '1956 年',
  56.         sales: 61
  57.       }, {
  58.         year: '1957 年',
  59.         sales: 145
  60.       }, {
  61.         year: '1958 年',
  62.         sales: 48
  63.       }, {
  64.         year: '1959 年',
  65.         sales: 38
  66.       }, {
  67.         year: '1960 年',
  68.         sales: 38
  69.       }, {
  70.         year: '1962 年',
  71.         sales: 38
  72.       }]
  73.     }
  74.   },
  75.   methods: {
  76.     setNavbar(){
  77.       AI.setNavbar({
  78.         title: 'F2柱状图', 
  79.       })
  80.     },
  82.     // 绘制
  83.     playMyChart() {
  84.       // Step 1: 创建 Chart 对象
  85.       const chart = new F2.Chart({
  86.         id: 'myChart',
  87.         pixelRatio: window.devicePixelRatio // 指定分辨率
  88.       });
  90.       // Step 2: 载入数据源
  91.       chart.source(this.list);
  93.       // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
  94.       chart.interval().position('genre*sold').color('genre');
  96.       // Step 4: 渲染图表
  97.       chart.render();
  98.     },
  100.     playOtherChart() {
  101.       var chart = new F2.Chart({
  102.         id: 'mountNode',
  103.         pixelRatio: window.devicePixelRatio
  104.       });
  106.       chart.source(this.list2, {
  107.         sales: {
  108.           tickCount: 5
  109.         }
  110.       });
  111.       chart.tooltip({
  112.         showItemMarker: false,
  113.         onShow: function onShow(ev) {
  114.           var items = ev.items;
  115.           items[0].name = null;
  116.           items[0].name = items[0].title;
  117.           items[0].value = '? ' + items[0].value;
  118.         }
  119.       });
  120.       chart.interval().position('year*sales');
  121.       chart.render();
  122.     }
  123.   }
  124. }
  125. </script>
  126. <style>
  127. #myChart, #mountNode{
  128.   width: 100%;
  129. }
  130. </style>