ECharts饼图（环形）：如何展示数据占比和结构变化

ECharts饼图（环形）：如何展示数据占比和结构变化

ECharts是一款基于JavaScript的数据可视化库，它提供了多种图表类型，包括折线图、柱状图、散点图、地图等。其中，饼图是一种常用的图表类型，可以用于展示数据的占比和结构变化。本文将介绍如何使用ECharts饼图来展示数据占比和结构变化，并提供具体的代码示例。

一、数据格式

在使用ECharts饼图之前，需要准备好数据，并将数据格式转换为ECharts所需的格式。在饼图中，数据格式通常采用以下方式：

data:[
  {name:'数据1',value:100},
  {name:'数据2',value:200},
  {name:'数据3',value:300},
  {name:'数据4',value:400}
]

其中，name表示数据的名称，value表示数据的值。需要注意的是，数据中的value值一般是数值型的，如果是字符串型的话需要使用parseInt()或parseFloat()进行转换。

二、基本饼图

下面演示如何使用ECharts绘制基本的饼图。首先需要引入ECharts库和主题，创建一个DOM元素用于显示图表，并初始化一个ECharts实例。然后，设置饼图的基本配置，包括标题、图例、颜色等。最后，将数据传入到饼图中进行渲染。

HTML代码：

<div id="pie1" style="width: 600px;height:400px;"></div>

JavaScript代码：

// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');

// 设置饼图的基本配置
var option1 = {
  title: {
    text: '基本饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart1.setOption(option1);

上面的代码中，设置了图表标题、数据提示、图例、饼图半径、数据等。该饼图的效果如下图所示：

<img src="https://i.imgur.com/3nfmAif.png" width="600">

三、环形饼图

环形饼图是基本饼图的一种变体，它可以将饼图中心部分挖空，形成一个环形的图形。在ECharts中，可以设置饼图的innerRadius属性来实现这一效果。下面的示例展示如何使用ECharts绘制环形饼图。

HTML代码：

<div id="pie2" style="width: 600px;height:400px;"></div>

JavaScript代码：

// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');

// 设置饼图的基本配置
var option2 = {
  title: {
    text: '环形饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      // 设置内半径
      innerRadius:'50%'
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart2.setOption(option2);

上述代码与基本饼图的代码几乎相同，只是在series中设置了innerRadius属性。该环形饼图的效果如下图所示：

<img src="https://i.imgur.com/per8UbA.png" width="600">

四、数据结构变化

饼图除了可以展示数据的占比，还可以用于展示数据结构的变化。在ECharts中，可以通过对数据的修改和重新渲染来实现这一效果。下面的示例演示了如何在饼图中对数据进行操作，完成数据结构变化的效果展示。

HTML代码：

<div id="pie3" style="width: 600px;height:400px;"></div>

JavaScript代码：

// 数据源
var data1 = [
  {value:100, name:'数据1'},
  {value:200, name:'数据2'},
  {value:300, name:'数据3'},
  {value:400, name:'数据4'}
];
var data2 = [
  {value:450, name:'数据5'},
  {value:250, name:'数据6'},
  {value:200, name:'数据7'},
  {value:150, name:'数据8'}
];

// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');

// 设置饼图的基本配置
var option3 = {
  title: {
    text: '数据结构变化示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:data1,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      innerRadius:'50%'
    }
  ]
};

// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);

// 点击事件
chart3.on('click', function (params) {
  // alert(params.name);
  if(params.name=='数据1'){
    option3.legend.data = ['数据5','数据6','数据7','数据8'];
    option3.series[0].data = data2;
  }else{
    option3.legend.data = ['数据1','数据2','数据3','数据4'];
    option3.series[0].data = data1;
  }
  chart3.setOption(option3);
});

上述代码中，我们定义了两个数据源data1和data2，它们分别表示两个不同的数据结构。在饼图中设置了一个点击事件，当点击饼图时，会根据点击的数据名称进行判断，如果点击的是data1中的数据1，则将legend和series中的数据修改为data2数据结构，否则将其修改为data1数据结构。最后，调用setOption()方法将修改后的图表重新渲染。该数据结构变化的效果如下图所示：

<img src="https://i.imgur.com/cBYqVee.gif" width="600">

综上，本文介绍了如何使用ECharts绘制饼图，并提供了具体的代码示例。除了基本饼图和环形饼图之外，还演示了如何在饼图中对数据进行操作，完成数据结构变化的效果展示。读者可以根据自己的需求和数据格式，进行相应的修改和优化。