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);
上面的代码中,设置了图表标题、数据提示、图例、饼图半径、数据等。该饼图的效果如下图所示:
三、环形饼图
环形饼图是基本饼图的一种变体,它可以将饼图中心部分挖空,形成一个环形的图形。在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属性。该环形饼图的效果如下图所示:
四、数据结构变化
饼图除了可以展示数据的占比,还可以用于展示数据结构的变化。在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()方法将修改后的图表重新渲染。该数据结构变化的效果如下图所示:
综上,本文介绍了如何使用ECharts绘制饼图,并提供了具体的代码示例。除了基本饼图和环形饼图之外,还演示了如何在饼图中对数据进行操作,完成数据结构变化的效果展示。读者可以根据自己的需求和数据格式,进行相应的修改和优化。
以上是ECharts饼图(环形):如何展示数据占比和结构变化的详细内容。更多信息请关注PHP中文网其他相关文章!