echarts 饼图环形图图例位置

 

 

option = {
title: {
text: '',
textStyle: {
color: '#17F0E3',
},
},
tooltip: {
trigger: 'item',
formatter:function (params){
return`${params.name}${params.value} 占比%`
}
},
legend: {
orient: '',
x: 'right', //可设定图例在左、右、居中
y: 'bottom', //可设定图例在上、下、居中
icon: 'pin',
// padding:['0%','20%','50%','0%'], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
textStyle: {
//图例文字的样式
color: '#fff',
fontSize: 12,
},
data: ['加油消费车', '加气消费车', '充电消费车', '未消费车'],
},
grid: {
//设置图表撑满整个画布
top: '12px',
left: '12px',
right: '16px',
bottom: '12px',
containLabel: true,
},
series: [
{
hoverAnimation: false, //鼠标悬浮是否有区域弹出动画，false:无 true:有
name: '',
type: 'pie',
radius: ['75%', '85%'], //设置饼图大小宽度
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter: function (data) {
// 设置圆饼图中间文字排版
return data + '\n' + '车流里总数'
},
},
emphasis: {
show: false, //文字至于中间时，这里需为true
textStyle: {
//设置文字样式
fontSize: '12',
color: '#fff',
},
},
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 450, name: '加油消费车', itemStyle: { color: '#59CFFF' } },
{ value: 620, name: '加气消费车',itemStyle: { color: '#7B79FF' } },
{ value: 80, name: '充电消费车', itemStyle: { color: '#23B89A' } },
{ value: 170, name: '未消费车', itemStyle: { color: '#B3B3B3' } },
],
},
],
};

-----------------------------------
echarts 饼图环形图图例位置
https://blog.51cto.com/u_15060540/3904442