1> ECharts 最基本的代碼結構
<!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>Document</title> <script src="./lib/echarts.min.js"></script> </head> <body> <div id="box" style="width: 600px; height: 400px;"></div>
var box = echarts.init(document.getElementById("box"))
<script>
var option={
}
box.setOption(option)
</script>
</body>
</html>
2> 准備數據，數據時kv對的形式
var data = [ {value: 100,name: "淘寶"}, {value: 200,name: "京東"}, {value: 300,name: "唯品會"}, {value: 400,name: "1號店"}, {value: 500,name: "聚美優品"} ]
3>准備配置項 在 series 下設置 type:pie
var option={ series: [ { type: 'pie', data:data } ] }
注意:
- 餅圖的數據是由 name 和 value 組成的字典所形成的數組
- 餅圖無須配置 xAxis 和 yAxis
餅圖的常見效果
顯示數值
- label.show : 顯示文字
- label.formatter : 格式化文字
var option={ series: [ { type: 'pie', data: data, label:{ //餅圖文字顯示 show:true, //顯示文字 formatter:'hehe' //決定文字顯示的內容 } } ] }
我們可以借助回調函數
formatter:function(arg){
console.log(arg)
}
輸出的每個數據的詳細信息
此時我們可以這樣做
formatter:function(arg){ return arg.name+'平台'+arg.value+"￥\n"+arg.percent+"%" }
圓環
radius
餅圖的半徑。可以為如下類型：
number ：直接指定外半徑值。 string ：例如， '20%' ，表示外半徑為可視區尺寸（容器高寬中
較小一項）的 20% 長度。 Array. ：數組的第一項是內半徑，第二項是外半徑, 通過 Array , 可以
將餅圖設置為圓環圖
var option={ series: [ { type: 'pie', data: data, label:{ //餅圖文字顯示 show:true, //顯示文字 //formatter:'hehe' //決定文字顯示的內容 formatter:function(arg){ return arg.name+'平台'+arg.value+"￥\n"+arg.percent+"%" } }, radius:'20%' } ] }
此時的半徑是容器高的一半的20%
百分比參照的是寬度和高度中較小的部分的一半進行百分比設置
圓環需要兩個半徑
radius:['50%','75%']
第一個代表的內圓的半徑，第二值代表的是外圓的半徑
南丁格爾圖
南丁格爾圖指的是每一個扇形的半徑隨着數據的大小而不同, 數值占比越大, 扇形的半徑也就越大
roseType:'radius'
var option={ series: [ { type: 'pie', data: data, label:{ //餅圖文字顯示 show:true, //顯示文字 //formatter:'hehe' //決定文字顯示的內容 formatter:function(arg){ return arg.name+'平台'+arg.value+"￥\n"+arg.percent+"%" } }, roseType:'radius' } ] }
選中效果
- selectedMode: 'multiple'
選中模式，表示是否支持多個選中，默認關閉，支持布爾值和字符串，字符串取值可
選 'single' ， 'multiple' ，分別表示單選還是多選
- selectedOffset: 30
選中扇區的偏移距離
var option={ series: [ { type: 'pie', data: data, label:{ //餅圖文字顯示 show:true, //顯示文字 //formatter:'hehe' //決定文字顯示的內容 formatter:function(arg){ return arg.name+'平台'+arg.value+"￥\n"+arg.percent+"%" } }, roseType:'radius', selectedMode: 'single' } ] }
此時點擊之后就會有偏移效果，在點擊其他的區域之后恢復原樣，點擊的區域顯示偏離效果
selectedMode: 'multiple'
此時點擊誰都會偏移，想恢復原樣再次點擊即可
我們可以設置偏離的大小
selectedOffset:30
此時的偏移量就會變大
