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