machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.饼图的常见效果</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 100px;height:100px"></div>
    <script>
        //1.是ECharts最基本的代码结构
        //2、准备数据[{name：？？？，value：？？？}，{}]
        //3、将type的值设置为pie
        var mCharts = echarts.init(document.querySelector("div"))
        //pieData就是需要设置给饼图的数据，数组，数组中包含一个有一个的对象，每一个对象中，需要有name和value
        var pieData = [
            {
                name:'淘宝',
                value:1121
            },
            {
                name:'京东',
                value:2103
            },
            {
                name:'唯品会',
                value:120
            },
            {
                name:'苏宁易购',
                value:522
            }
        ]
        var option = {
            series:[
                {
                    type:'pie',
                    data:pieData,
                    label:{//饼图文字的显示
                        show:false,//显示文字
                        //formatter:'hehe'    //决定文字显示的内容
                        formatter:function(arg){
                            // console.log(arg)
                            return arg.name+'平台'+arg.value+'元\n'+arg.percent+'%'
                        }
                    },
                    //radius:20   //饼图的半径
                    //radius:'20%'  //百分比是参照的宽度和高度中较小的那一部分的一半来进行百分比设置
                    //圆环
                    radius:['50%','75%'],    //第0个元素代表的是内圆的半径，第1个元素是外圆的半径

                    //南丁格尔图
                    // roseType:'radius',   //南丁格尔图：饼图的每一个区域的半径是不同的

                    //选中效果
                    // selectedMode:'single'   //选中的效果：能够将选中的区域偏离圆点的一小段距离
                    selectedMode:'multiple',
                    selectedOffset:30   //选中时，设置偏移圆点的距离（偏移量
                    

                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>