2019-08-22 vue项目中使用蚂蚁数据可视化 antv

蚂蚁数据可视化

官网示例

• 第一步：安装

npm install @antv/f2 --save

• 第二步：在vue 组件组件中引入

import F2 from '@antv/f2'

• 第三步： id绑定

  <canvas id="myChart" width="400" height="260"></canvas>

• 第四步： 代码编辑

line() {
                // const F2 = require('@antv/f2'); ///  也可以这样
                const data = [
                    {genre: 'Sports', sold: 275},
                    {genre: 'Strategy', sold: 115},
                    {genre: 'Action', sold: 120},
                    {genre: 'Shooter', sold: 350},
                    {genre: 'Other', sold: 150},
                ];

// Step 1: 创建 Chart 对象
                const chart = new F2.Chart({
                    id: 'myChart',
                    pixelRatio: window.devicePixelRatio // 指定分辨率
                });

// Step 2: 载入数据源
                chart.source(data);

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
                chart.interval().position('genre*sold').color('genre');

// Step 4: 渲染图表
                chart.render();

            },

antv.png

• 大功告成，效果如下。

效果

• 有些事件不能触发。
• 感觉还是没有 echarts 好用。