2023ECharts饼图：如何展示数据占比

随着数据可视化的广泛应用，ECharts这一优秀的可视化库也受到越来越多的关注。其中，饼图被广泛应用于展示数据的占比情况。本文将介绍如何使用ECharts饼图展示数据占比，并提供具体的代码示例。

一、ECharts饼图的基础概念

首先，我们需要了解饼图的基础概念。饼图常用于表示数据的占比情况，将具体的数值转化为角度大小，再用扇形区域的大小来表示。各扇形区域的大小与它们的数值成比例。

二、ECharts饼图实现方式

使用ECharts绘制饼图，需要先引入ECharts库，并创建一个带有指定尺寸的div标签，用于展示饼图。具体代码如下：

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

其中，style标签用于指定饼图所在的div标签的尺寸。script标签则引入了ECharts库的min版。

然后，我们需要通过JavaScript代码来实现饼图。具体的代码如下：

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

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

上述代码中，我们首先使用echarts.init()方法来初始化ECharts实例。然后，我们定义了一个JavaScript对象option，该对象定义了饼图中所需要的各种属性和数据。最后，我们使用setOption()方法将这个option对象应用到ECharts实例中，从而生成饼图。

具体来说，option对象包含了以下几个属性：

1. title：用于设置饼图的标题；
2. tooltip：用于设置鼠标浮动时的提示信息；
3. legend：用于设置饼图中每个扇形区域的标签；
4. series：用于设置饼图中具体的数据系列，包括半径、数据、样式等。

三、ECharts饼图的样式设置

除了基本的数据展示外，ECharts饼图还提供了多种样式设置的选项，可以通过修改相应属性来实现不同样式的饼图。

1. 内外半径

通过设置radius属性来调整饼图的内外半径，从而控制扇形区域的大小。如下代码：

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

上述代码中，radius属性包含了一个数组，数组中的两个值分别代表内外半径的百分比。在此例中，内半径为50%，外半径为70%。

2. 图例位置

通过设置legend属性中的x、y、orient属性来调整图例的位置和方向。如下代码：

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

上述代码中，x属性设置图例的水平位置为左侧，y属性设置图例的垂直位置为中心，orient属性设置图例的方向为垂直方向。

3. 阴影效果

通过设置itemStyle属性中的emphasis属性，可以给扇形区域添加阴影等效果，从而增强饼图的视觉效果。如下代码：

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

上述代码中，shadowBlur代表阴影的模糊程度，shadowOffsetX和shadowOffsetY代表阴影的水平和垂直偏移量，shadowColor代表阴影的颜色。

四、ECharts饼图的实例

下面，我们给出一个具体的ECharts饼图实例，其中包含了以上提到的基础数据以及样式设置。代码如下：

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

该饼图包含了以下特点：

1. 添加了图例，并将图例位置调整为左上角；
2. 添加了鼠标悬浮时的提示浮窗，并显示了占比百分比；
3. 增加了阴影效果，并设置了鼠标悬浮时的高亮特效。