环形多个

1651736639(1).png

const chartData = [
              {
                value: 88,
                name: '已评审',
              },
              {
                value: 44,
                name: '待评审',
              },
            ]
            const colorList = ['#2AC5F5','#CA5E74'];
            const sum = chartData.reduce((per, cur) => per + cur.value, 0);
            const gap = (1 * sum) / 100
            const pieData1 = []
            for (let i = 0; i < chartData.length; i++) {
              pieData1.push({
                ...chartData[i],
                itemStyle: {
                  borderWidth: 3,
                  borderRadius: 0,
                  borderColor: '#0B1B38',
                },
              })
            }

            let option = {
              title: [
                {
                  text: this.title,
                  top:26,
                  left:30,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: '600',
                    color: '#FFFFFF',
                    textAlign: 'center',
                  },
                },
              ],
              graphic:[{
                type:"text",
                left:this.rateOk.toFixed(0)>9?"39%":this.rateOk.toFixed(0)==100?'20%':'42%',
                top:"50%",
                style:{
                    text:this.rateOk.toFixed(0)+'%',
                    textAlign:"center",
                    fill:"#fff",
                    fontSize:20,
                    fontWeight:700
                }
              }],
              legend: {
                icon: 'circle',
                bottom: '5%',
                align: 'left',
                itemGap: 18,
                itemWidth: 8,
                itemHeight: 8,
                selectedMode: false,
                itemStyle: {},
                selectedMode:false,
                textStyle: {
                  color:'#FFFFFF',
                  rich: {
                    name: {
                      verticalAlign: 'right',
                      align: 'left',
                      fontSize: 16,
                      width: 200,
                      color: '#D8DDE3',
                    },
                    percent: {
                      padding: [0, 0, 0, 10],
                      color: '#5db7d3',
                      fontSize: 16,
                    },
                  },
                },
                // formatter: (name) => {
                //   const item = chartData.find(i => {
                //     return i.name === name
                //   })
                //   const p = ((item.value / sum) * 100).toFixed(0)
                //   return '{name|' + name + '}' + '{percent|-个/-%}'
                // },
              },
              grid: {
                top: '0%',
                left: '0%',
                bottom: '0%',
                right: '0%',
              },
              color: colorList,
              series: [
                {
                  type: 'pie',
                  roundCap: true,
                  radius: ['40%', '58%'],
                  center: ['50%', '54%'],
                  hoverAnimation:false,
                  backgroundStyle:{
                          color:'rgba(255,0,0,0.1)',
                        },
                  label: {
                    show: true,
                    formatter: '{c}',
                    color:'#fff',
                    position:'outside',
                  },
                  labelLine: {
                    show: true,
                    length:5,
                    length2:7,
                    minTurnAngle:140,
                  },
                  data: pieData1,
                },
              ],
            }  
            this.dom8 = echarts.init(this.$refs.dom8)
            this.dom8.setOption(option)