Echarts-案例【饼状图案例（二）】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>课程内容分布扇形图</title> <script type="text/javascript" src="js/echarts_56.js" ></script> <style type="text/css"> #main{ width:600px; height:400px; border: 1px solid red; } </style> </head> <body> <div id="main"></div> <script type="text/javascript"> var mychart=echarts.init(document.getElementById("main")); var option={ title:{ //驼峰规则：第一个单词首字母小写，其余单词首字母大写 text:'课程内容分布', left:'center', top:5, textStyle:{ color:"#ccc" } }, //提示标签 tooltip:{ //格式化方法 //{a}:系列名称 //{b}:数据项名称 //{d}% ：百分数 //{c}:数值 //{d}:百分比 formatter:'{a}<br/><b>: {d}%' }, //图例组件 legend:{ bottom:5, right:5, orient:'vertical', textStyle:{fontSize:12}, data:['英语','分布式计算框架','数据可视化'] }, series:[{ name:'课程内容分布', type:'pie', radiue:'60%', center:['50%','50%'], //水平垂直方向居中 closewise:false, //改变布局顺序，默认情况下是顺时针，当使用clockWise:false改变为逆时针方向布局，注意：''是否使用的问题 startAngle:0, //默认起始角为90度 data:[ { value:20, name:'英语', //局部扇形样式的设置（顺时针方向布局） itemStyle:{ normal:{ color:'rgb(0,255,0)', shadowBlur:200, //阴影大小 shadowColor:'rbga(0,0,0,0.9)', shadowoffsetY:'30' } } }, { value:70, name:'分布式计算框架', itemStyle:{ normal:{ color:'rgb(0,0,255)' } } }, { value:10, name:'数据可视化', itemStyle:{ normal:{ color:'rgb(255,0,0)' } } } ] }] }; mychart.setOption(option); </script> </body> </html>
效果：
浙公网安备 33010602011771号