用echarts绘制饼状图----绘制圆环图

圆环图是在圆环中显示数据，其中每个圆环代表一个数据项（item），用于对比分类数据的数值大小。圆环图跟标准饼图同属于饼图这一种图表大类，只不过更加美观，也更有吸引力。在绘制环形图时，适合利用一个分类数据字段或连续数据字段，但数据最好不超过9条。在ECharts中创建圆环图非常简单，只需要在代码2‑14中修改一个语句，即将语句“radius: '66%',”修改为“radius:['45%', '75%'],”，即可由一个标准饼图变为一个圆环图，修改后的半径是有两个数值的数组，分别代表圆环的内、外半径。修改后的代码运行结果如图所示。

作品展示

源代码如下：

<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件
                text: '影响健康、寿命的各类因素',  //设置主标题
                subtext: 'WHO统计调查报告',  //设置次标题
                left: 'center'  //设置主次标题都左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置垂直排列
                left: 62,  //设置图例左边距
                top: 22,  //设置图例顶边距
                data: ['生活方式', '遗传因素', '社会因素', '医疗条件', '气候环境']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱组件是否显示
                left: 444,  //设置工具箱左边距
                top: 28,  //设置工具箱顶边距
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [  //配置数据系列组件
                {
                    name: '访问来源',
                    type: 'pie',
                    radius :[ '45%','75%'], //设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: [  //设置数据的具体值
                        { value: 60, name: '生活方式' },
                        { value: 15, name: '遗传因素' },
                        { value: 10, name: '社会因素' },
                        { value: 8, name: '医疗条件' },
                        { value: 7, name: '气候环境' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

注意部分代码的echarts.js是下载到本地的，后面会分享下载链接。当然也可以把用下面的代替