preface

When the product to develop an app UI prototype of a divided into three parts on the drawing circle diagram, thought using echarts should be well done, mainly considering the mobile end echarts compatibility is good, but the actual operation found that can’t be perfect after reduction, finally find a lot of similar case, add some adjustment has been realized.

The prototype sample

At first glance, I thought that the pie chart in Echarts could be modified, but the effect was not good. First, there was a rounded corner on the edge of each arc; second, the width of radians was different, gray was the thinest, red was the second, and green was the widest.

The second time I saw some examples of the circular progress bar

Thought this figure should be implemented, but to see the sample code is found that the figure is the pie in the echarts component of a stack, a general overlay, there are two area effect, still can be, but the effect of the three areas in is not set when the width of the circular arc is acceptable, but there will always be some overlay after set the width is beyond less beautiful .

Perfect implementation

Finally in the rose map website to find a more complex implementation, through modifying the configuration of the basic perfect use of Ehcarts to achieve this graph. The first is the configuration code for an option of Echarts. For convenience, series and option are separated

const colorDataHandle = (data, total, width = 375) = > {
    let num = 0
    let option = {
        angleAxis: {
            axisLine: {
		show: false,},axisLabel: {
		show: false,},splitLine: {
		show: false,},axisTick: {
		show: false,},min: 'dataMin'.max: 'dataMax'.startAngle: 135,},radiusAxis: {
                type: 'category'.axisLine: {
                    show: false,},axisTick: {
                show: false,},axisLabel: {
                show: false,}},polar: {
            radius: '95%'
        },
        series: []}// Option is a processing of incoming data
      const options = data.map((item, index) = > {
        num += item
        const a = {
          type: 'bar'.data: [0.0.0, num],
          coordinateSystem: 'polar'.z: 9999 - index,
          roundCap: true.color: colors[index],
          barGap: '100%'.// barWidth: '30%',
          itemStyle: {
            // Control the width of the arc, the arc width control does not do too much judgment, simple distinction
            borderWidth: index === 0 ? 4 : index === 1 ? 2 : 0.// shadowBlur: 5,
            // color: 'transparent',
            borderColor: colors[index],
            shadowColor: colors[index],
          },
        }
        return a
      })
            option.series = options
      return option
}
Copy the code

Then there is a processing of the three color areas

const colors = [
  {
    type: 'linear'.x: 0.y: 0.x2: 0.y2: 1.colorStops: [{offset: 0.color: '#1DBC3F'.// The color at 0%
      },
      {
        offset: 1.color: '#1DBC3F'.// Color at 100%},],}, {type: 'linear'.x: 0.y: 0.x2: 0.y2: 1.colorStops: [{offset: 0.color: '#CB3939'.// The color at 0%
      },
      {
        offset: 1.color: '#CB3939'.// Color at 100%},],}, {type: 'linear'.x: 0.y: 0.x2: 0.y2: 1.colorStops: [{offset: 0.color: '#C0C0C0'.// The color at 0%
      },
      {
        offset: 1.color: '#C0C0C0'.// Color at 100%},],},];Copy the code

Here is a flexible use of the echarts type linear component, I did not go into the specific implementation of a configuration item.

rendering

The final realization of a rendering on the real machine display

The problem of rounded corners at the beginning and end of each section of arc is ensured, and the width of each section of arc is increased

conclusion

Echarts this library is broad and deep, at the same time, evaluation of the demand for some didn’t do it needs to be careful and cautious, when I saw this graphics feel use echarts should be ok, but in the process of development, pit or a lot, the same opportunity also appeared in casual in, or to have the opportunity to prepare the people, if too complicated with the thinking of graphics Just using a ring diagram to do that might not work as well on the page.