ECharts图表------饼状图

谁借莪１个温暖的怀抱￠ 2022-06-01 01:14 354阅读 0赞

效果图:

![SouthEast][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>ECharts饼状图</title>
    	</head>
    	<body>
    		<div id="maintter" style="width: 550px; height: 400px; margin: 0 auto"></div>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.min.js"></script>
    		<script language="JavaScript">
    			// 基于准备好的dom，初始化echarts实例
    	        var myChart = echarts.init(document.getElementById('maintter'));
    			option = {
    			    title : {
    			        text: 'Bright2017博主探讨大会！',
    			        subtext: '纯属虚构',
    			        x:'center'
    			    },
    			    tooltip : {
    			        trigger: 'item',
    			        formatter: "{a} <br/>{b} : {c} ({d}%)"
    			    },
    			    legend: {
    			        orient: 'vertical',
    			        left: 'left',
    			        data: ['屌丝','直男','佛系青年','靓仔','帅锅']
    			    },
    			    series : [
    			        {
    			            name: '访问来源',
    			            type: 'pie',
    			            radius : '55%',
    			            center: ['50%', '60%'],
    			            data:[
    			                {value:335, name:'屌丝'},
    			                {value:310, name:'直男'},
    			                {value:234, name:'佛系青年'},
    			                {value:135, name:'靓仔'},
    			                {value:1548, name:'帅锅'}
    			            ],
    			            itemStyle: {
    			                emphasis: {
    			                    shadowBlur: 10,
    			                    shadowOffsetX: 0,
    			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
    			                }
    			            }
    			        }
    			    ],
    //			          不加颜色参数的话会默认使用自带的
                    color: ['red', 'green', 'yellow', 'blueviolet','olive','aqua']  
    			};
    			// 使用刚指定的配置项和数据显示图表。
    	        myChart.setOption(option);
    		</script>
    	</body>
    </html>

官网: [http://echarts.baidu.com/index.html][http_echarts.baidu.com_index.html]

[SouthEast]: /images/20220601/1f71f7e44dca4952a582606159f66767.png
[http_echarts.baidu.com_index.html]: http://echarts.baidu.com/index.html