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);