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

用户4344670

发布于 2019-08-28 11:34:45

1.6K0

发布于 2019-08-28 11:34:45

文章被收录于专栏：vue的实战vue的实战

蚂蚁数据可视化

官网示例

第一步：安装

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();

            },