This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

This is a kind of pie chart, a circle chart, which is also a commonly used chart. For now, I’ll go over the display and setup of some special places.

1. Setting of ring chart

center: ['50%', '49%'],
radius: ['45%', '63%'],
Copy the code

2. Set the main title and subtitle of the title in the ring center

Text and subtext are text modifications for main headings and subheadings. The subtitle subtext, which can be used directly when setting the content, /n, is as follows

X,y set the title in the chart position.

TextStyle and subtextStyle set the style of the title, which is different from normal CSS. The style must be camel style, such as normal CSS: font size, chart style: fontSize

Show: true, text: 'category ', x: 'center', y: 'center', itemGap: 10, textStyle: {fontSize: 28, fontStyle: 'normal', fontWeight: 700, color: '# FFF '}, subtext: 'fantasy fiction \n(era)', subtextStyle: {// Subtitle color change subtitle can be used with newline \n fontSize: 14, fontStyle: 'normal', fontWeight: 400, color: '#fff' }Copy the code

3. Setting of chart label

Think this kind of wire and text in the alignment of the setting, is a bit of trouble, you can have a look, carefully study (I also a little bit of a long time to come out)

(1) This is the display of the text on the chart

Mainly use the formatter function to display, and then use rich to set the style of the display of different parameters (this can be written as a separate function to configure and independently open), I set different display different color configuration and distance below

Formatter: function (params) {const name = params.name; const percent = params.percent + '%'; const index = params.dataIndex; const value = params.value; Return [` {a ${index} | ${name}} {b ${index} | ${value}} {the pre ${index}} | people \ n ${index} {c | ${percent}} `, `{hr${index}|}` ].join('\n'); }, color: '#fff', rich: { a: { fontSize: 14, color: '#dfe7fc', align: 'center' }, b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' }, c: { paddingTop: '10px', color: '#CBA0FF', fontSize: 14, align: 'center' } }Copy the code
(2) Setting of wire

It is mainly the following two modules

LabelLine: {// this is the graph above the text display line set length: 15, // the length of the line length2: 240,// the length of the line maxSurfaceAngle: 80}, labelLayout: Function (params) {const isLeft = params.labelrect. x < mychart.getwidth () / 2; function (params) {const isLeft = params.labelrect. x < mychart.getwidth () / 2; const points = params.labelLinePoints; // Update the end point. points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width; return { labelLinePoints: points }; },Copy the code

But sometimes the above Settings need to be added to the setting height and line height

margin: 20,
minMargin: 10,
edgeDistance: 20,
lineHeight: 20,
height: 40,
Copy the code

4, gradient color Settings

This is also a function, main is to use echarts. Graphic. That LinearGradient, or when a radial gradient, echarts. Graphic. RadialGradient

Var colorList = [{c1: '#3288FC', c2: '#36B4FD'}, {c1: '#FCAE17', c2: '#FCAE17', c2: '#FCDA5B' }, { c1: '#CBA0FF', c2: '#598EFE' }, { c1: '#30DDD8', c2: '#84F0F0' }, { c1: '#3288FC', c2: '#36B4FD' }, { c1: '#FCAE17', c2: '#FCDA5B' }, { c1: '#CBA0FF', c2: '#598EFE' }, { c1: '#30DDD8', c2: '#84F0F0' } ]; Return new echarts. Graphic. That LinearGradient (1, 0, 0, 0, [{/ / color gradient function in the first four parameters respectively in four locations on the left, down, right, offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 } ]); }}Copy the code

5. Complete case code

import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, 'dark'); var option; const that = this; Option = {tooltip: {show: false, trigger: 'item'}, Grid: {}, title: {show: true, text: 'person classification ', x: 'center', y: 'Center ', itemGap: 10, textStyle: {fontSize: 28, fontStyle: 'normal', fontWeight: 700, color: '# FFF '}, subtext: 'fantasy fiction \n(epoch)', subtextStyle: {// Subtitle color change subtitle can use newline \n fontSize: 14, fontStyle: 'normal', fontWeight: 400, color: '#fff' } }, series: [ { type: 'pie', center: ['50%', '49%'], radius: ['45%', '63%'], // minAngle: 0, startAngle: 0, // avoidLabelOverlap: true, // Whether to enable avoidLabelOverlap: {label: {show: true, position: 'center' } }, label: { // position: 'outer', alignTo: 'edge', margin: 20, minMargin: 10, edgeDistance: 20, lineHeight: 20, height: 40, formatter: Function (params) {const name = params.name; const percent = params.name; const percent = params.percent + '%';  const index = params.dataIndex; const value = params.value; Return [` {a ${index} | ${name}} {b ${index} | ${value}} {the pre ${index}} | people \ n ${index} {c | ${percent}} `, `{hr${index}|}` ].join('\n'); }, color: '#fff', rich: { a: { fontSize: 14, color: '#dfe7fc', align: 'center' }, b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' }, c: { paddingTop: '10px', color: '#CBA0FF', fontSize: 14, align: 'center'}}}, labelLine: {length2:240, maxSurfaceAngle: 80 }, labelLayout: Function (params) {const isLeft = params.labelrect. x < mychart.getwidth () / 2; function (params) {const isLeft = params.labelrect. x < mychart.getwidth () / 2;  const points = params.labelLinePoints; // Update the end point. points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width; return { labelLinePoints: points }; }, data: [ { value: 17, name: }, {value: 16, name: 'anti inflammation'}, {value: 24, name: 'forest action'}, {value: 5, name: 'anti dust'}, {value: 16, name: 'anti inflammation'}, {value: 24, name: 'forest action'}, {value: 5, name: 'anti dust'}, {value: 16, name: 'Yifan'}, {value: 21, name: 'yifan'}, {value: 21, name: 'Yifan'}, {value: 21, name: 'Yifan'}], 0, shadowColor: 'rgba(0, 0, 0, 0.5)', label: {show: true}}, normal: {color: Function (params) {var colorList = [{c1: '#3288FC', c2: '#36B4FD'}, c1: '#FCAE17', c2: '#FCDA5B' }, { c1: '#CBA0FF', c2: '#598EFE' }, { c1: '#30DDD8', c2: '#84F0F0' }, { c1: '#3288FC', c2: '#36B4FD' }, { c1: '#FCAE17', c2: '#FCDA5B' }, { c1: '#CBA0FF', c2: '#598EFE' }, { c1: '#30DDD8', c2: '# 84 f0f0}]; return new echarts. Graphic. That LinearGradient (1, 0, 0, 0, [{/ / color gradient function in the first four parameters respectively in four locations on the left, down, right, offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 } ]); } } } } ] }; option && myChart.setOption(option);Copy the code

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details