|
关于G2图表介绍
G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性
使用 G2，可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表
G2图表官网地址
https://antv.gitee.io/zh
G2图标详细开发手册
https://antv-g2.gitee.io/zh/docs/api/general/chart
使用
第一步：安装G2依赖包
第二步：在绘图前需要为 G2 准备一个 DOM 容器
第三步：引入
import G2 from "@antv/g2"; 第四步：在mounted中定义 可先在全局定义let chart = null;
const chart = new G2.Chart({})chart = new G2.Chart({ container: "webInfo",//指定图表容器 forceFit: true,//强制配合 width: 600, // 指定图表宽度 height: 306,//高度 padding: [20, 30, 30, 50],//内边距 })第五步：载入数据源
/马上更新图表 / chart.changeData(chartData) /仅仅是更新数据，而不需要马上更新图表/ chart.source(chartData) /需要更新图表时调用 / chart.repaint() 扩展清除图形语法
模板中使用完整代码（柱状图）<template> <div id="c1"></div></template><script> export default { name: "spectaculars", data(){ return{ basicColumnChartProp:{ data:[{ genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }], container:'c1', width:700, height:600 }, } }, methods:{ test(){ const data = this.basicColumnChartProp.data; const chart = new G2.Chart({ container: this.basicColumnChartProp.container, width : this.basicColumnChartProp.width, height : this.basicColumnChartProp.height }); chart.source(data); chart.interval().position('genre*sold').color('genre') chart.render(); } }, mounted() { this.test(); }, }</script>
在补充一下世界地图（当初项目需求找了G2的地图,感觉API文档有些东西没说明白,这里记录一下） <template> <div id="c1"></div></template><script> const DataSet = require('@antv/data-set'); export default { name: "spectaculars", data(){ return{ basicColumnChartProp:{ container:'c1', }, } }, methods:{ test(){ fetch('src/views/dataCenter/data/world/countries.geo.json') .then(res => res.json()) .then(mapData => { const chart = new G2.Chart({ container:this.basicColumnChartProp.container, forceFit: true, height:700, padding: [10,10] }); chart.tooltip({ showTitle: false }); // 同步度量 chart.scale({ longitude: { sync: true }, latitude: { sync: true } }); chart.axis(false); chart.legend('trend', { position: 'left' }); // 绘制世界地图背景 const ds = new DataSet(); const worldMap = ds.createView('back') .source(mapData, { type: 'GeoJSON' }); const worldMapView = chart.view(); worldMapView.source(worldMap); worldMapView.tooltip(false); worldMapView.polygon().position('longitude*latitude').style({ fill: '#fff', stroke: '#ccc', lineWidth: 1 }); const userData = [ { name: 'Russia', value: 86.8 }, { name: 'China', value: 106.3 }, { name: 'Japan', value: 94.7 }, { name: 'Mongolia', value: 98 }, { name: 'Canada', value: 98.4 }, { name: 'United Kingdom', value: 97.2 }, { name: 'United States of America', value: 98.3 }, { name: 'Brazil', value: 96.7 }, { name: 'Argentina', value: 95.8 }, { name: 'Algeria', value: 101.3 }, { name: 'France', value: 94.8 }, { name: 'Germany', value: 96.6 }, { name: 'Ukraine', value: 86.3 }, { name: 'Egypt', value: 102.1 }, { name: 'South Africa', value: 101.3 }, { name: 'India', value: 107.6 }, { name: 'Australia', value: 99.9 }, { name: 'Saudi Arabia', value: 130.1 }, { name: 'Afghanistan', value: 106.5 }, { name: 'Kazakhstan', value: 93.4 }, { name: 'Indonesia', value: 101.4 } ]; const userDv = ds.createView() .source(userData) .transform({ geoDataView: worldMap, field: 'name', type: 'geo.region', as: [ 'longitude', 'latitude' ] }) .transform({ type: 'map', callback: obj => { // obj.trend = obj.value obj.trend = (obj.value > 100) ? '男性更多' : '女性更多'; return obj; } }); const userView = chart.view(); userView.source(userDv, { trend: { alias: '每100位女性对应的男性数量' } }); userView.polygon() .position('longitude*latitude') .color('trend', [ '#F51D27', '#0A61D7' ]) .opacity('value') .tooltip('name*trend') .animate({ leave: { animation: 'fadeOut' } }); chart.render(); }) }, }, mounted() { this.test(); }, }</script> - fetch这个地方官网引入的是文件目录,不是具体的json文件,使用的时候找不到文件
- fetch引入的json这里是本地的,其次G2官网提供的远程githup地址获取不到这个json文件
- fetch引入json文件的路径，不是你当前文件到该json的路径，而是index.html到该json文件的地址
到此这篇关于VUE引入使用G2图表的实现的文章就介绍到这了,更多相关VUE使用G2图表内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
用jquery实现轮播图效果
JS实现简单的todoList(记事本)效果 |
