//数据
var workList = [
{ name: '李晓燕', value: '120' },
{ name: '魔尊', value: '220' },
{ name: '天蓬', value: '220' },
{ name: '景天', value: '180' },
{ name: '雪见', value: '100' },
{ name: '李逍遥', value: '300' },
{name: '灵儿', value: '120' },
{ name: '唐宇', value: '220' },
{ name: '摸到', value: '220' },
{ name: '风来', value: '180' },
{ name: '褚阿生', value: '100' },
{ name: '十号', value: '300' },
]
//配置
var optionWorkFlow = {
//提示框
tooltip: {
trigger: 'item'
},
//设置图例
legend: {
show: true,
// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
orient: 'horizontal',
// x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
x: 'left',
// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
y: 'top',
itemWidth: 20, // 设置图例图形的宽
itemHeight: 16, // 设置图例图形的高
// itemGap设置各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
itemGap: 30,
backgroundColor: '#666', // 设置整个图例区域背景颜色
textStyle: { //图例文字的样式
color: '#000',
fontSize: 16
},
data: ['李晓燕', '魔尊', '天蓬', '景天', '雪见', '李逍遥', '灵儿', '唐宇', '摸到', '风来', '褚阿生', '十号']
},
graphic: { //图形中间文字
type: "text",
left: "center",
top: "center",
style: {
text: '',
textAlign: "center",
fill: "#000000",
fontSize: 60
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'], // radius: '50%', // 设置饼状图大小,100%时,最大直径=整个图形的min(宽,高)
avoidLabelOverlap: false,
// itemStyle 设置饼状图扇形区域样式
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
// 设置值域的指向线
label: {
//show: false, \n
normal: {
show: false,
//设置标签显示内容
formatter: "{b}:{c}"
},
emphasis: {
show: true,
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
// 设置值域的那指向线
labelLine: {
show: false
},
data: workList
}
]
};
setTimeout(function () {
//获取容器宽高
var workFlowInfoWidth = document.getElementById('chartsTutorLifeCycle').offsetWidth + 'px'
document.getElementById('chartsTutorLifeCycle').style.width = workFlowInfoWidth
var workFlowBarCharts = echarts.init(document.getElementById('chartsTutorLifeCycle'));
workFlowBarCharts.hideLoading();
workFlowBarCharts.setOption(optionWorkFlow);
//监听窗口变化
window.addEventListener('resize', function () {
//Performance1BarCharts.resize()
var workFlowInfoWidth = document.getElementById('chartsTutorLifeCycle').offsetWidth + 'px'
document.getElementById('chartsTutorLifeCycle').style.width = workFlowInfoWidth
workFlowBarCharts.resize()
})
}, 0)
效果: