echarts---圆饼图

显示图表

<script src="/static/js/echarts.min.js"></script>
<script>
	//DOM 容器
	container = document.getElementById("chart");
	//初始化图表
	var chart = echarts.init(container)
	//配置图表  json对象
	var option = {}
	
	//显示图表
	chart.setOption(option)

</script>

配置项option

<script>
	var option  = {

		title:{text:"图表标题"}，
		tooltip:{}, //提示信息
		legend: {
			data:[{name:"data1",icon:"circle",textStyle:{color:"green"}}]
			}//图例

		xAxis: {//坐标轴刻度标签
    		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			}
		yAxis:{}
		//画图的数据
		series: [{
    		name: '销量',  //数据名称
    		type: 'bar',  //图表类型
    		data: [5, 20, 36, 10, 10, 20]  //数据内容
			}]

		//type 指定图表的类型
		/*
		type: 'bar'：柱状图
		type: 'line'：折线/面积图
		type: 'pie'：饼图
		type: 'scatter'：散点（气泡）图
		type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
		type: 'radar'：雷达图
		type: 'tree'：树型图
		type: 'treemap'：树型图
		type: 'sunburst'：旭日图
		type: 'boxplot'：箱形图
		type: 'candlestick'：K线图
		type: 'heatmap'：热力图
		type: 'map'：地图
		type: 'parallel'：平行坐标系的系列
		type: 'lines'：线图
		type: 'graph'：关系图
		type: 'sankey'：桑基图
		type: 'funnel'：漏斗图
		type: 'gauge'：仪表盘
		type: 'pictorialBar'：象形柱图
		type: 'themeRiver'：主题河流
		type: 'custom'：自定义系列
		*/


</script>

绘制圆饼图

<div id="bar" style="width:640px;height:480px"></div>
    <script>
        
        var chart = echarts.init(document.getElementById("bar"))
        
        var option = {

            title:{
                text:"圆饼图",
                x:"center",
                textStyle:{
                    fontSize:24,
                    fontWeight:"bold",
                    color:"red"
                    }
                },
            series:[{
                name:"testPie",//数据
                type:"pie",//图表类型
                radius:"60%",//半径是可视区域的0.6
                data:[//数据数组
                    {value:20,name:"b1"},//每个数据块
                    {value:40,name:"b2"},
                    {value:50,name:"b3"}
                    ],
            }],

            legend:{data:["testPie"],x:"right"},//图例
        }
        //显示图表
        chart.setOption(option)
    </script>

设置roseType:“angle”—>南丁格尔图

设置阴影
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: ‘rgba(100, 0, 0, 0.5)’
}

title 详细配置

text:“标题”
x: ‘left/center/right’, 水平位置，默认"left"，
y: ‘top/center/bottom’, 垂直位置，
textStyle: {
fontSize: 18,
fontWeight: ‘bolder’,
color: ‘#333’
},
backgroundColor: ‘rgba(0,0,0,0)’, 标题背景色
borderColor: ‘#ccc’, 标题边框色
borderWidth: 0, 边框线宽px
padding: 5, 内边距px
itemGap: 10, 主副标题纵向间隔px

subtextStyle: {
color: ‘#aaa’ 副标题
}

legend 详细配置

data:[{name:“s1”,icon:“circle”,textStyle:{color:“red”}}]
orient: ‘horizontal/vertical’, 布局方式，默认为水平布局，
x: ‘center/left/right’, 水平位置，
y: ‘top/center/bottom’, 垂直位置

饼图配置

pie: {
center : [‘50%’, ‘50%’], 默认全局居中
radius : [0, ‘75%’],
clockWise : false, 默认逆时针
startAngle: 90,
minAngle: 0, 最小角度改为0
selectedOffset: 10, 选中是扇区偏移量
itemStyle: {
normal: {
color: 各异,
borderColor: ‘#fff’,
borderWidth: 1,
label: {
show: true,
position: ‘outer’
textStyle: null 默认使用全局文本样式
},
labelLine: {
show: true,
length: 20,
lineStyle: {
color: 各异,
width: 1,
type: ‘solid’
}
}
},
emphasis: {
color: 各异,
borderColor: ‘rgba(0,0,0,0)’,
borderWidth: 1,
label: {
show: false
position: ‘outer’
textStyle: null // 默认使用全局文本样式
},
labelLine: {
show: false,
length: 20,
lineStyle: {
color: 各异,
width: 1,
type: ‘solid’
}
}
}
}
},

其他

参考