1. 如下图所示,图的位置大小以及图例的位置:
2. 代码如下图所示:legend位置(图例位置),radius大小(图大小),center位置(图位置)
var option = { title: { text: \'\', subtext: \'\', x: \'center\' }, tooltip: { trigger: \'item\', formatter: "{a} <br/>{b}({d}%)" }, legend: { orient: \'vertical\', left: \'70%\', //图例距离左的距离 y: \'center\', //图例上下居中 data: ["甘肃","兰州","济南","上海","徐州"] }, color: [\'rgb(203,155,255)\', \'rgb(149,162,255)\', \'rgb(58,186,255)\', \'rgb(119,168,249)\', \'rgb(235,161,159)\'],//五个数据,五个颜色 series: [ { name: \'\', type: \'pie\', radius: \'70%\', //图的大小 center: [\'35%\', \'50%\'], //图的位置,距离左跟上的位置 data:[ { name:"甘肃", value:\'10\' }, { name:"兰州", value:\'8\' }, { name:"济南", value:\'9\' }, { name:"上海", value:\'5\' }, { name:"徐州", value:\'6\' } ] } ] };
3. 环形中间文字,如下图所示:
4. 代码如下图所示:graphic中间文字设置以及一些样式
var option = { tooltip: { trigger: \'item\', show: true, formatter: "{a} <br/>{b}: {c} ({d}%)", textStyle: { align: \'right\' }, }, color: [\'rgb(149,162,255)\'], legend: { orient: \'vertical\', x: \'left\', show: false, data: [\'烟尘\'] }, graphic: { type: \'text\', left: \'center\', top: \'center\', style: { text: \'烟尘\', textAlign: \'center\', fill: \'rgb(149,162,255)\', width: 30, height: 30, } }, series: [ { name: \'\', type: \'pie\', radius: [\'70%\', \'100%\'], avoidLabelOverlap: false, labelLine: { normal: { show: false } }, data: [{ value: 10, name:"烟尘", itemStyle: { label: { show: true, position: \'inside\' }, }, }] } ] };
————————————————
原文链接:https://blog.csdn.net/qq_34790644/article/details/89308738