Echart--圆型图

效果:

设置数据:

var option3 = {
        title: {
          text: '天气情况统计',
          subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {/*鼠标经过视图，显示数据*/
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['西凉', '益州', '兖州', '荆州', '幽州']/*显示条*/
        },
        series: [{
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [{
              value: 1548,
              name: '幽州',
              label: {
                normal: {
                  formatter: [
                    '{title|{b}}{abg|}',
                    '{weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                    '{hr|}'
//                  '{Sunny|晴朗}{value|202}{rate|55.3%}',
//                  '{Cloudy|小雨}{value|142}{rate|38.9%}',
//                  '{Showers|小雪}{value|21}{rate|5.8%}'
                  ],/*join('
')换行*/
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {// 设置样式
                    title: {
                      color: '#e0e',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                       '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left'
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left'
                    },
                    Showers: {
                      height: 30,
                      align: 'left'
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                       '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                       20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                       20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                       40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                       40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              }
            },
            {
              value: 535,
              name: '荆州',
              label: {/*显示数据,比例*/
                  normal: {
                    show: true,
                    // position: 'inner',
                    formatter: '{b}, {c} 
 {d}%'
                  }
                }
            },
            {
              value: 510,
              name: '兖州',
              label: {
                  normal: {
                    show: true,
                    // position: 'inner',
                    formatter: '{b}, {c} 
 {d}%'
                  }
                }
            },
            {
              value: 634,
              name: '益州',
              label: {
                  normal: {
                    show: true,
                    // position: 'inner',
                    formatter: '{b}, {c} 
 {d}%'
                  }
                }
            },
            {
              value: 735,
              name: '西凉',
              label: {
                  normal: {
                    show: true,
                    // position: 'inner',
                    formatter: '{b}, {c} 
 {d}%'
                  }
                }
            }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      var data =[
        {
          weather: '大雨',
          data: 20,
          rate: '20%'
        },
        {
          weather: '小朗',
          data: 30,
          rate: '30%'
        },
        {
          weather: '大雪',
          data: 40,
          rate: '40%'
        },
        {
          weather: '小雪',
          data: 10,
          rate: '10%'
        },
        {
          weather: '多云',
          data: 10,
          rate: '10%'
        },
        {
          weather: '阴天',
          data: 50,
          rate: '10%'
        }
      ]
      /*动态加入详情数据*/
      function getData() {
        var arr = []
        for(let item in data) {/*按模版插入数据*/
          arr.push(('{'+('Sunny|'+data[item].weather)+'}')+('{'+'value|'+data[item].data+'}')+('{'+'rate|'+data[item].rate+'}'))
        }
        var format=this.option3.series[0].data[0].label.normal.formatter
        for(let item of arr){
          format.push(item)/*push数据到formt*/
        }
        /*换行显示*/
        this.option3.series[0].data[0].label.normal.formatter = this.option3.series[0].data[0].label.normal.formatter.join('
')
      }
      this.getData()