Let’s take a look at the effect
It’s actually a combination of two layers of pie charts, set on the outer layer
1. Set the option
option: {
polar: {
radius: ['61%'.'57%'].center: ['50%'.'50%'],},angleAxis: {
max: 1.show: false.startAngle: 0,},radiusAxis: {
type: 'category'.show: true.axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false}},series: [
// Outer scale
{
hoverAnimation: false.type: 'pie'.z: 2.data: [].radius: ['65%'.'75%'].zlevel: -2.label: {
normal: {
position: 'inside'.show: false,}}},// Inner pie chart
{
type: 'pie'.radius: ['56%'.'60%'].center: ['50%'.'50%'].data: [].labelLine: {
length: 40,},// Prompt line Settings
label: {
formatter: '{a|{c}}\n{hr|}\n {per|{d}%} '.backgroundColor: 'rgba(0, 0, 0, 0)'.borderColor: 'rgba(0, 0, 0, 0)'.borderWidth: 1.borderRadius: 4.rich: {
a: {
color: '#fff'.lineHeight: 26.align: 'center'.fontSize: 16,},hr: {
borderColor: 'auto'.width: '100%'.borderWidth: 1.height: 0,},per: {
color: '#1ef0ed'.backgroundColor: 'rgba(0, 0, 0, 0)'.padding: [5.5].borderRadius: 4.fontSize: 16,}}},},]}Copy the code2. Crunch the data
2.1 Data Format
/ / to monitor chartData
watch: {
chartData: {
handler: function (newVal) {
if (newVal) {
this.initEchart(); }},deep: true}},// Initialize the echarts diagram
initEchart() {
this.chart = echarts.init(document.getElementById('four-color'))
// Reset the data in this.option.series on each initialization
this.option.series[0].data = []
this.option.series[1].data = []
/ / traverse chartData
this.chartData.map(item= >{
if (item.data > 0) {
let num = Math.round((item.data / this.total) * 100)
for (let i = 0; i < num; ++i) {
this.option.series[0].data.push({
value: 2.// The width of the colored part
name: i,
ratio: item.ratio,
itemStyle: {
normal: {color: item.color,}
},
}, {
value: 1.// The width of the colorless part
name: ' '.itemStyle: {
normal: {
label: { show: false },
labelLine: { show: false },
color: 'rgba(0, 0, 0, 0)'.borderColor: 'rgba(0, 0, 0, 0)'.borderWidth: 0,}}})}}// Inner pie chart data
this.option.series[1].data.push({
hoverOffset: 1.value: item.data,
itemStyle: { color: item.color },
})
})
// If the total data is 0, set the value of each color to 25%, depending on the situation
if (this.total == 0) {
this.chartData.map(item= >{
for (let i = 0; i < 25; ++i) {
this.option.series[0].data.push({
value: 2.name: i,
ratio: item.ratio,
itemStyle: {
normal: {color: item.color,}
},
},{
value: 1.name: ' '.itemStyle: {
normal: {
label: { show: false },
labelLine: { show: false },
color: 'rgba(0, 0, 0, 0)'.borderColor: 'rgba(0, 0, 0, 0)'.borderWidth: 0}}})}})}this.chart.setOption(this.option, true);
window.addEventListener("resize".function(){
this.chart.resize();
});
},
Copy the code3. Set the total number
Total in this figure is implemented by positioning, or by using the title attribute in Echarts
<div class="content common-content">
<div id="four-color" style="width:100%; height:100%"></div>
</div>
<div class="icon-text">{{total}}</div>
Copy the code/ / title
title : {
show:true./ / display strategy, the default value is true, optional for: true (display) | false (hidden)
text: 'Main heading'.// Main heading text, '\n' specifies a newline
link:' '.// Main header text hyperlink, default true
target: null./ / specified window open the main title hyperlink, support the 'self' | 'blank', do not specify a equivalent to 'blank' (new window)
subtext: 'Subtitle'.// Subheading text, '\n' specifies a newline
sublink: ' '.// Subtitle text hyperlinks
subtarget: null./ / specified window open subtitle hyperlinks, supporting the 'self' | 'blank', do not specify a equivalent to 'blank' (new window)
x:'center'/ / level placement, defaults to "left", can be selected as: 'center' | 'left' | 'right' | {number} (x coordinate, px)
y: 'top'./ / vertical position, the default for top, optional for: 'top' | 'bottom' | 'center' | {number} (y, px)
textAlign: null./ / horizontal alignment, the default according to x set up automatic adjust, optional for: left '|' right '|' center
backgroundColor: 'rgba (0,0,0,0)'.// Title background color, default 'RGBA (0,0,0)' transparent
borderColor: '#ccc'.// Title border color, default '# CCC '
borderWidth: 0.// Title border line width, unit px, default 0 (no border)
padding: 5.// The header margin is px. The default margin is 5 in each direction, and the array is set to top, right, bottom, and left
itemGap: 10.// The vertical interval between the main and subheadings, in px, defaults to 10
textStyle: {/ / main title text style {" fontSize ": 18," fontWeight ":" bolder ", "color" : "# 333"}
fontFamily: 'Arial, Verdana, sans... '.fontSize: 12.fontStyle: 'normal'.fontWeight: 'normal',},subtextStyle: {// Subtitle text style {"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans... '.fontSize: 12.fontStyle: 'normal'.fontWeight: 'normal',},zlevel: 0.// Level 1 cascade control. By default, 0, each different Zlevel will generate a separate canvas, and components or ICONS of the same Zlevel will be rendered on the same canvas. The higher zlevel is, the more it depends on the top layer. The increase of Canvas objects will consume more memory and performance. It is not recommended to set too much Zlevel.
z: 6.// Level 2 cascade control, default 6, the higher z on the same canvas (same zlevel) is about the top layer.
},
Copy the code