Echarts個性化圖表的樣式--繪制南丁格爾圖
阿新 • • 發佈：2017-07-02
rip angle 設置 radi 範圍 query orm 個性化 ech
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>個性化圖表的樣式--繪制南丁格爾圖</title> </head> <body> <div id="main" style="width: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>
Echarts個性化圖表的樣式--繪制南丁格爾圖