vue 中使用 @antv/g2图表库
程序员文章站
2022-04-21 21:36:19
...
1.安装npm install @antv/g2 --save
2.使用
2.1引入文件和基础配置
import { Chart } from '@antv/g2';
2.2 创建 div 图表容器
<div id="container"></div>
2.3 编写图表绘制代码
2.3.1new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息;
2.3.2chart.data() 载入图表数据源;
2.3.3使用图形语法进行图表的绘制;
2.3.4chart.render() 渲染图表。
完整代码如下:
// index.js文件
import { Chart } from '@antv/g2'; //引入
const data = [ //模拟假数据
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new Chart({ //创建 Chart 图表对象
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data); // 载入图表数据源
chart.scale('sales', { // 自动调整最小值最大值
nice: true,
});
chart.tooltip({ // tooltip提示
showMarkers: false
});
chart.interaction('active-region');
chart
.interval()
.position('year*sales')
adjust('stack')
.position('percent') //映射x,y轴,一个的话
.color('item') //必须要加,不然不显示,包含了色调、饱和度和亮度
.label('percent', percent => ({ // 数据标签,一般在图上面
content: res => `${res.item}: ${percent}%`,
})) // 将数据值映射到图形的文本上的方法
.tooltip('year*sales', (year, sales) => ({ // data中的数据返回,用作提示
name: year,
value: title === '订单总量' ? `${sales} 单` : `¥${sales}`,
})) // 加载初始化数据,,year是纵轴标题,scales是横轴标题
// 声明需要进行自定义图例字段: 'item'
chart.legend('item', {
position: 'right', // 图例显示位置
custom: true, // 关键字段,告诉 G2,要使用自定义的图例
items: data.map((obj, index) => ({
name: obj.item,
value: obj.count,
marker: {
symbol: 'square',
style: {
r: 5,
fill: chart.getTheme().colors10[index], // marker 颜色,使用默认颜色,同图形对应
},
},
})),
itemValue: {
style: {
fill: '#999999',
},
formatter: val => (title === '订单总量' ? `${val} 单` : `¥${val}`), // 格式化 itemValue 内容
},
})
chart.render();
// index.html文件
<div id="container" />
上一篇: 怕传染
下一篇: 宿舍里、课堂上的爆笑