ECharts制作饼状图

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

查看演示 下载源码

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

HTML

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

<script src="/echarts.min.js"></script>

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

Javascript

现在要初始化echarts实例，然后设置选项，最后渲染图像。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{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的常见图表应用，Echarts还有热力图、K线图、关系图等等应用，有兴趣的朋友请关注Echarts官网，本站Helloweba将不再撰文讲解Echarts了，接下来我们会有更好更实用的文章分享给大家，敬请关注。