饼图的一部分又做一个饼图

饼图是一种常用的数据可视化方式，可以直观地展示不同数据占比情况。在某些情况下，我们需要更加详细地展示其中一部分数据的结构，这时就可以使用饼图的一部分再做一个饼图。

一、选择饼图的一部分

首先需要选择需要更加详细展示的数据部分。可以根据具体的需求，选择占比较大，或者占比较小但是比较复杂的部分。

例如下面这个数据集展示了某个国家的人均消费情况：

var data = [
	{name: '食品烟酒', value: 20},
	{name: '衣着', value: 10},
	{name: '居住', value: 30},
	{name: '交通通信', value: 15},
	{name: '教育文化娱乐', value: 10},
	{name: '医疗保健', value: 15}
];

我们可以选择其中的“居住”这一部分作为需要详细展示的部分。

二、使用echarts进行饼图的绘制

接下来，我们可以使用echarts库进行饼图的绘制。首先需要引入echarts库：

<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

然后，我们可以通过如下代码绘制最开始的饼状图：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        name: '消费占比',
        type: 'pie',
        radius: '60%',
        data: data
    }]
};

myChart.setOption(option);

结果如下所示：

<script> var data = [ {name: '食品烟酒', value: 20}, {name: '衣着', value: 10}, {name: '居住', value: 30}, {name: '交通通信', value: 15}, {name: '教育文化娱乐', value: 10}, {name: '医疗保健', value: 15} ]; var myChart = echarts.init(document.getElementById('main')); var option = { series: [{ name: '消费占比', type: 'pie', radius: '60%', data: data }] }; myChart.setOption(option); </script>

三、选择需要详细展示的数据

我们选择原来数据集中的“居住”这一部分进行详细展示。代码如下：

var nestedData = [
	{name: '房租', value: 50},
	{name: '水费电费', value: 20},
	{name: '物业费', value: 10},
	{name: '家具家电', value: 10},
	{name: '其它', value: 10}
];

这里将“居住”部分分为了五个小部分，代表不同的具体消费。

四、将原有饼状图中需要详细展示的部分提取出来

为了将饼图的一部分又做一个饼图，我们需要将原有饼状图中需要详细展示的部分提取出来，代码如下：

var highlightedData = [];
var otherData = [];

for (var i = 0; i < data.length; i++) {
    if (data[i].name === '居住') {
        highlightedData.push(data[i]);
    } else {
        otherData.push(data[i]);
    }
}

var option = {
    series: [{
        name: '消费占比',
        type: 'pie',
        radius: '60%',
        data: otherData,
        label: {
            formatter: '{b} {c} ({d}%)'
        }
    }, {
        name: '居住消费细节',
        type: 'pie',
        radius: ['40%', '55%'],
        data: highlightedData,
        label: {
            formatter: '{b} {c} ({d}%)'
        }
    }]
};

这里使用了for循环，将需要详细展示的部分单独提取出来到highlightedData数组中，其他部分则放到otherData数组中。

五、使用echarts绘制详细展示饼图

最后，我们可以使用echarts库绘制详细展示饼图。代码如下所示：

var nestedChart = echarts.init(document.getElementById('nested'));

var option = {
    series: [{
        name: '居住消费细节',
        type: 'pie',
        radius: '60%',
        data: nestedData,
        label: {
            formatter: '{b} {c} ({d}%)'
        }
    }]
};

nestedChart.setOption(option);

在HTML中需要准备一个ID为nested的div，用来放置详细展示饼图，代码如下：

<div id="nested" style="height: 300px;"></div>

最终结果如下所示，可以通过拖动鼠标中键缩放详细展示饼图：

<script> var nestedData = [ {name: '房租', value: 50}, {name: '水费电费', value: 20}, {name: '物业费', value: 10}, {name: '家具家电', value: 10}, {name: '其它', value: 10} ]; var highlightedData = []; var otherData = []; for (var i = 0; i < data.length; i++) { if (data[i].name === '居住') { highlightedData.push(data[i]); } else { otherData.push(data[i]); } } var myChart = echarts.init(document.getElementById('main')); var option = { series: [{ name: '消费占比', type: 'pie', radius: '60%', data: otherData, label: { formatter: '{b} {c} ({d}%)' } }, { name: '居住消费细节', type: 'pie', radius: ['40%', '55%'], data: highlightedData, label: { formatter: '{b} {c} ({d}%)' } }] }; myChart.setOption(option); var nestedChart = echarts.init(document.getElementById('nested')); var option = { series: [{ name: '居住消费细节', type: 'pie', radius: '60%', data: nestedData, label: { formatter: '{b} {c} ({d}%)' } }] }; nestedChart.setOption(option); </script>

六、小结

综上所述，饼图的一部分又做一个饼图可以更加详细地展示数据中某些部分的结构，提升数据可视化的效果。要实现这个效果，首先需要选择需要详细展示的数据部分，然后将其从原有饼状图中单独提取出来，最后使用echarts库绘制详细展示饼图即可。