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

百变鹏仔 3周前 (11-27) #echarts

文章标签数据

随着数据可视化的广泛应用，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对象包含了以下几个属性：

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

三、ECharts饼图的样式设置

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

内外半径

通过设置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%。

图例位置

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

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

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

阴影效果

通过设置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>

该饼图包含了以下特点：

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

文章推荐

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

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用