Echarts之餅狀圖詳解

一、簡單使用

1.引入Echarts

<script src="echarts.min.js"></script>

2.準備Dom容器

<div id="ecPie" style="width: 600px;height:400px;"></div>

3.使用

var ecPie=echarts.init(document.getElementById('ecPie'),'lightTheme');
var pieOption={
    backgroundColor:'#2c343c',  //背景顏色
    title:{
        text:'示例演示'
    },
    visualMap:{
      show:false,   //不顯示visualMap組件，只用於明暗度的映射
      min:80,   //映射的最小值爲80
      max:600,  //映射的最大值爲600
      inRange:{
          colorLightness:[0,1]  //明暗度的範圍爲0到1
      }
    },
    series:[
        {
            name:'訪問來源',
            type:'pie',
            radius:'55%',     //半徑
            roseType:'angle',//玫瑰樣式--南丁格爾玫瑰圖，突出角度
            //圖形樣式
            itemStyle:{
                //普通樣式
                normal:{
                    shadowBlur:100,     //陰影大小
                    shadowOffsetX:0,    //陰影水平方向的偏移
                    shadowOffsetY:0,    //陰影垂直方向的偏移
                    shadowColor:'rgba(0,0,0,0.5)'   //陰影顏色
                },
                //高亮樣式
                emphasis:{
                    shadowBlur:200,                 //陰影大小
                    shadowColor:'rgba(0,0,0,0.5)'   //陰影顏色
                }
            },
            //文本樣式
            label:{
            	//文本普通樣式
                normal:{
                    textStyle:{
                        color:'rgba(255, 255, 255, 0.8)'    //文字顏色（紅綠藍,透明度）-白色
                    }
                }
            },
            //引導線樣式
            labelLine:{
           		//引導線普通樣式
                normal:{
                    lineStyle:{
                        color:'rgba(255, 255, 255, 0.4)'    //引導線顏色（紅綠藍,透明度）-白色
                    }
                }
            },
            //具體數據
            data:[
                {name:'視頻廣告',value:235},
                {name:'聯盟廣告',value:274},
                {name:'郵件營銷',value:310},
                {name:'直接訪問',value:335},
                {name:'搜索引擎',value:400}
            ]
        }
    ]
}
ecPie.setOption(pieOption);