本文主要介绍了VUE引入使用G2图表的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于G2图表介绍
G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性
使用 G2，可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表
G2图表官网地址
https://antv.gitee.io/zh
G2图标详细开发手册
https://antv-g2.gitee.io/zh/docs/api/general/chart
使用
第一步：安装G2依赖包
npm instal @antv/g2
第二步：在绘图前需要为 G2 准备一个 DOM 容器
<div id="webInfo"></div>
第三步：引入
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()
扩展清除图形语法
/清理所有/ chart.c<span>本文来源gaodai#ma#com搞*!代#%^码$网*</span>lear();
模板中使用完整代码（柱状图）
<div id="c1"></div>
在补充一下世界地图
（当初项目需求找了G2的地图,感觉API文档有些东西没说明白,这里记录一下）
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({
以上就是VUE引入使用G2图表的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：VUE引入使用G2图表的实现
