<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个性化图表的样式--绘制南丁格尔图</title> </head> <body> <div id="main" style="800px;height:600px;"></div> <script src="echarts.js"></script> <script> myChart = echarts.init(document.querySelector("#main")); myChart.setOption({ backgroundColor:'#2c343c', textStyle:{color:'rgba(255,255,255,.6)'}, roseType:'angle',//设置成 南丁格尔图 itemStyle:{ normal:{ color:'#c23531', //设置扇形的颜色 shadowBlur:200, //阴影的大小 shadowOffsetX:0, //阴影水平方向上的偏移 shadowOffsetY:0, //阴影垂直方向上的偏移 shadowColor:'rgba(255,255,255,.5)' //阴影颜色 } }, series:[ { name:'', type:'pie', radius:'55%', data:[ {value:235,name:'视频广告',itemStyle:{normal:{color:'#243516'}}}, {value:135,name:'联盟广告'}, {value:350,name:'邮件营销'}, {value:146,name:'直接访问'}, {value:211,name:'搜索引擎'} ] } ], label:{ normal:{ textStyle:{ color:'rgba(255,255,255,.6)' } } }, labelLine:{ normal:{ lineStyle:{ color:'rgba(255,255,255,.3)' } } }, visualMap:{ show:false, //不显示visualMap组件,只用于明暗度的映射 min:80, max:600, inRange:{ colorLightness:[0,1] //明暗度的范围是0到1 } } }) </script> </body> </html>