怎么使用ECharts制作饼状图-创新互联

本篇文章为大家展示了怎么使用ECharts制作饼状图，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

在工作中如果遇到需要计算总费用或金额的各个部分构成比例的情况，一般都是通过各个部分与总额相除来计算，而且这种比例表示方法很抽象，我们可以使用一种饼形图表工具，能够直接以图形的方式形象直观的显示各个组成部分所占比例

结合实例给大家分享站长们常常用到的网站分析工具中的访问来源功能，我们使用Echarts制作饼状图，用于表现不同类目（访问来源）的数据在总和中的占比。

HTML

和前几篇文章介绍的一样，首先引入Echarts，然后在需要放置图表的地方加上p#myChart，同时给它加上宽度和高度属性。

// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('myChart')); option = {    tooltip: {        trigger: 'item',        formatter: "{a}
{b}: {c} ({d}%)"    },    legend: {        orient: 'horizontal',        left: 'center', bottom: 0,        data:['直达','其它外链','搜索引擎','直接输入网址或书签','cnblogs.com','微博','微信','百度','谷歌','360','必应','其他']    },    series: [        {            name:'访问来源', //内环            type:'pie',            selectedMode: 'single', //单一选中模式            radius: [0, '30%'], //饼图的半径 [内半径，外半径]            label: {                normal: {                    position: 'inner' //内置文本标签                }            },            labelLine: {                normal: {                    show: false //不需要设置引导线                }            },            data:[                {value:335, name:'直达', selected:true},                {value:679, name:'其它外链'},                {value:1548, name:'搜索引擎'}            ]        },        {            name:'访问来源',            type:'pie',            radius: ['40%', '55%'],            data:[                {value:335, name:'直接输入网址或书签'},                {value:310, name:'cnblogs.com'},                {value:234, name:'微博'},                {value:135, name:'微信'},                {value:1048, name:'百度'},                {value:251, name:'谷歌'},                {value:147, name:'360'}, {value:42, name:'必应'},                {value:60, name:'其他'}            ]        }    ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

以上代码中，绘制了两个换，内环和外环，内环是大类，本例中有3个大类，外环是3个大类对应的小类。比如访问来源为搜索引擎的分类下，有百度、谷歌360等几大搜索引擎，从图表上就能直观体现各分类所占比例大小，当然鼠标滑上图表上时会显示分类所占的比例数字。

饼图更适合表现数据相对于总数的百分比等关系， 每个的弧度表示数据数量的比例。如果只是表示不同类目数据间的大小，建议使用 柱状图，人们对于微小的弧度差别相比于微小的长度差别更不敏感，或者也可以通过配置饼状图参数roseType 显示成南丁格尔图，通过半径大小区分数据的大小。

上述内容就是怎么使用ECharts制作饼状图，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。