Vue uses echart to customize labels and colors

This article example shares the specific code of Vue using echart to customize tags and colors for your reference. The specific content is as follows

Regular style

UI painting style effect

The detail is that the color of the small dot must be consistent with the color of the pie chart piece. This can be achieved using this code in versions before 5.0 (echarts version).

label:{
 formatter: params => {//●
       return (
               '{icon|▅}{name|' +params.name+ '}{value|' +
               params.value + '}'
           );
       },
       rich:
           icon:
               fontSize: 16
           },
           name: {
               fontSize: 16,
               padding: [0, 10, 0, 4],
           },
           value: {
               fontSize: 16,
           }
       },
}

But my project has some special effects that are only supported by 5.0, so I have to upgrade to 5.0, and then this color will not work. We need to find a solution to implement it, and this is how it was finally implemented. When assigning data, reassign the color of each label and assign the value of the pie chart color block.
There are two sets of data here because the percentage inside the pie chart is superimposed, which is what is circled by the basket.

Configuration items:

series: [
    {
      type: 'pie',
      radius: [0, '75%'],
      center: ['50%', '50%'],
      top:0,
      // roseType: 'radius',
      avoidLabelOverlap: true,
      // minShowLabelAngle: 0.6,
      startAngle: 0,
      label: {
        show:true,
        position: 'outer',
        alignTo: 'edge',
        //Another solution point normal: {
          formatter: params => {
            // formatColor(params.color)
            // color = params.color
              return (
                  '{icon|● }{name|' + params.name + '}'+'\n'+'{value|' +
                  params.value+'times' + '}'
              );
          },
          padding:[0,-40,25,-40],
          rich:
              icon:
                fontSize: 15,
              },
              name: {
                fontSize: 13,
                color: '#666666'
              },
              value: {
                fontSize: 12,
                color: 'rgba(0,0,0,0.35)'
              }
          }
        }
      },
      labelLine:{
        length:10,
        length2:70,
        smooth: false,
        lineStyle:{
          color:"rgba(0,0,0,0.15)"
        }
      },
      data: []
    },
    {
      name: '',
      type: 'pie',
      radius: [0, '75%'],
      center: ['50%', '50%'],
      data:[],
      top:0,
      // roseType: 'radius',
      avoidLabelOverlap: true,
      startAngle: 0,
      itemStyle: {
          normal: {
              label: {
                  show: true,
                  position: 'inner',
                  color:"#fff",
                  fontSize: 14,
                  align:"center",
                  formatter: function (p) { //Indicator line corresponds to text, percentage return p.percent + "%";
                  }
              },
          }
      }
    }
  ]

Reassignment:

//Get the color card and reassign it let colorArr = pieOption.color

 let seriesData = JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows))||[]
      let seriesData1 = JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows))||[]
      if(seriesData.length){
        seriesData.forEach((item,index)=>{
          item.name = item.typeStr
          item.value = item.num
          item.label = {color:colorArr[index]}
        })
        seriesData1.forEach((item,index)=>{
          item.name = item.typeStr
          item.value = item.num
        })
      }
return {legend: {data: seriesData}, series: [{data: seriesData},{data: seriesData1}]};

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue custom tags and single page multiple routing implementation code
Custom el-select drop-down box label function in el-form label in Vue
The src attribute of Vue custom tags cannot use relative paths
Example of tab switching effect implemented by Vue2.0 (content can be customized)
Detailed explanation of Vue-basic tags and custom controls

<<: How to solve the high concurrency problem in MySQL database

>>: How MySQL uses transactions