Summary:
<p dir="auto">G2 is a set of graphically-based graphical syntax that is data-driven and highly user-friendly and extensible, allowing users to build a wide variety of interactive statistics without having to worry about detailed implementation details chart.<br />
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
<blockquote>
<h4>您将从这个教程中学到什么
<ul>
<li>如何引入js文件
<li>如何定义容器
<li>如何定义数据
<li>如何引用数据
<li>如何定义提示框
<li>如何渲染图表
<blockquote>
<h4>学习此教程的必备条件
<ul>
<li>你需要一个代码编辑器，比如<a href="http://www.eclipse.org/downloads/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Eclipse，<a href="https://www.editplus.com/download.html" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">EditPlus，<a href="https://www.emeditor.com/download/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">EmEditor等等
<li>你需要下载<a href="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">g2.js，并在文件中调用
<blockquote>
<h4>教程难度
<ul>
<li>容易
<blockquote>
<h4>教程内容
<p dir="auto">演示效果<br />
<img src="https://images.hive.blog/0x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1516932816/duzrgkcoyvfzowz3exih.gif" alt="demo.gif" />
<p dir="auto"><strong>1. 知识点A - 如何引入js文件
<pre><code><script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<p dir="auto">使用内嵌<strong>script对js文件进行引入，用于后期图表使用。
<hr />
<p dir="auto"><strong>2. 知识点B - 如何定义容器
<pre><code><div id="multipie"></div>
<p dir="auto">使用<strong>div定义容器，用于展示图表。容器名：<strong>multipie。
<hr />
<p dir="auto"><strong>3. 知识点C - 如何定义数据
<pre><code> const { DataView } = DataSet;
const data = [
{ value: 251, type: 'DemoA', name: 'DemoA1' },
{ value: 1048, type: 'DemoA', name: 'DemoA2' },
{ value: 610, type: 'DemoB', name: 'DemoB1' },
{ value: 434, type: 'DemoB', name: 'DemoB2' },
{ value: 335, type: 'DemoC', name: 'DemoC1' },
{ value: 250, type: 'DemoC', name: 'DemoC2' }
];
<ul>
<li><strong>const: 用于定义数组。
<li><strong>data：定义为数组名。
<li><strong>格式：{ value:饼图占比值， type:'主分类', name:'子分类'
<hr />
<p dir="auto"><strong>4. 知识点D - 如何引用数据
<pre><code> const dv = new DataView();
dv.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent'
});
const chart = new G2.Chart({
container: 'multipie',
forceFit: true,
height: window.innerHeight,
padding: 0
});
chart.source(dv, {
percent: {
formatter: val => {
val = (val * 100).toFixed(2) + '%';
return val;
}
}
});
<ul>
<li><strong>dv.source：定义载入数据。
<li><strong>type：属性为percent，表示使用百分比。
<li><strong>dimension：定义统计维度的字段。
<li><strong>container：定于数据从<strong>multipie数组取值。
<li><strong>forceFit: 定义图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
<li><strong>height: 定义图表高度。
<li><strong>window.innerHeight: 获取页面可用高度。
<li><strong>source：定义为chart装载数据，返回chart对象。
<hr />
<p dir="auto"><strong>5. 知识点E - 如何定义提示框
<pre><code> chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.legend(false);
chart.intervalStack()
.position('percent')
.color('type')
.label('type', {
offset: -10
})
.tooltip('name*percent', (item, percent) => {
percent = (percent * 100).toFixed(2) + '%';
return {
name: item,
value: percent
};
})
.select(false)
.style({
lineWidth: 1,
stroke: '#fff'
});
<ul>
<li><strong>tooltip：图表的tooltip配置，G2图表的tooltip使用html渲染。
<li><strong>itemTpl：定义提示样式。
<li><strong>legend： 配置图表图例。
<li><strong>color： 定义颜色。
<li><strong>label： 定义文本。
<hr />
<p dir="auto"><strong>6. 知识点F - 如何渲染图表
<pre><code> const outterView = chart.view();
const dv1 = new DataView();
dv1.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'name',
as: 'percent'
});
outterView.source(dv1, {
percent: {
formatter: val => {
val = (val * 100).toFixed(2) + '%';
return val;
}
}
});
outterView.coord('theta', {
innerRadius: 0.5 / 0.75,
radius: 0.75
});
outterView.intervalStack()
.position('percent')
.color('name', [ '#BAE7FF', '#7FC9FE', '#71E3E3', '#ABF5F5', '#8EE0A1', '#BAF5C4' ])
.label('name')
.tooltip('name*percent', (item, percent) => {
percent = (percent * 100).toFixed(2) + '%';
return {
name: item,
value: percent
};
})
.select(false)
.style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
<ul>
<li><strong>chart.view：创建视图，返回view对象。
<li><strong>type：属性为percent，表示使用百分比。
<li><strong>dimension：定义统计维度的字段。
<li><strong>coord：设置坐标系类型，同时允许进行各种坐标系变换，默认为笛卡尔坐标系。
<li><strong>render：用于将图表渲染至画布。
<hr />
<p dir="auto"><strong>完整代码
<pre><code><html lang="en">
<head>
<meta charset="UTF-8">
<title>多层饼图</title>
</head>
<body>
<div id="multipie"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script>
const { DataView } = DataSet;
const data = [
{ value: 251, type: 'DemoA', name: 'DemoA1' },
{ value: 1048, type: 'DemoA', name: 'DemoA2' },
{ value: 610, type: 'DemoB', name: 'DemoB1' },
{ value: 434, type: 'DemoB', name: 'DemoB2' },
{ value: 335, type: 'DemoC', name: 'DemoC1' },
{ value: 250, type: 'DemoC', name: 'DemoC2' }
];
const dv = new DataView();
dv.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent'
});
const chart = new G2.Chart({
container: 'multipie',
forceFit: true,
height: window.innerHeight,
padding: 0
});
chart.source(dv, {
percent: {
formatter: val => {
val = (val * 100).toFixed(2) + '%';
return val;
}
}
});
chart.coord('theta', {
radius: 0.5
});
chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.legend(false);
chart.intervalStack()
.position('percent')
.color('type')
.label('type', {
offset: -10
})
.tooltip('name*percent', (item, percent) => {
percent = (percent * 100).toFixed(2) + '%';
return {
name: item,
value: percent
};
})
.select(false)
.style({
lineWidth: 1,
stroke: '#fff'
});
const outterView = chart.view();
const dv1 = new DataView();
dv1.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'name',
as: 'percent'
});
outterView.source(dv1, {
percent: {
formatter: val => {
val = (val * 100).toFixed(2) + '%';
return val;
}
}
});
outterView.coord('theta', {
innerRadius: 0.5 / 0.75,
radius: 0.75
});
outterView.intervalStack()
.position('percent')
.color('name', [ '#BAE7FF', '#7FC9FE', '#71E3E3', '#ABF5F5', '#8EE0A1', '#BAF5C4' ])
.label('name')
.tooltip('name*percent', (item, percent) => {
percent = (percent * 100).toFixed(2) + '%';
return {
name: item,
value: percent
};
})
.select(false)
.style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
</script>
</body>
</html>
<p dir="auto"><strong>最终效果<br />
<img src="https://images.hive.blog/0x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1516932816/duzrgkcoyvfzowz3exih.gif" alt="demo.gif" />
<blockquote>
<h4>系列课程
<ul>
<li>如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。<br />
If you like my tutorial , You can check out your profile for more such tutorials.
<li>您可以使用zqz-tutorial标签快速查看我发布的所有教程<br />
You can use the "zqz-tutorial" tag to see all the tutorials I've posted.
<p dir="auto"><br /><hr /><em>Posted on <a href="https://utopian.io/utopian-io/@hui.zhao/g2-how-to-use-g2-to-make-multipie-chart" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io - Rewarding Open Source Contributors<hr /><p>
Your contribution cannot be approved because it does not follow the Utopian Rules.
Not original.
You can contact us on Discord.
[utopian-moderator]