echarts使用注意事项

1.饼状图的位置可以使用 series 属性中的 center 属性来实现，其他图可以使用grid来确定

2.饼状图的中心点发生改变时候，title位置需要调整位置使其处于中间位置

// 定义标题移动到圆环中心
        title: {
          text: '1908',
          // 副标题
          subtext: '测试副标题',
          x: 'center',
          y: 'center',
          textAlign: 'center',
          //先设置上面为center，再调整top和left的位置
          top: '33%',
          left: '18%',
          textStyle: {
            fontSize: 22,
            color: 'black'
          }
        },

3.legend的样式可以使用富文本定义

        legend: {
          show: true,
          orient: 'vertical',
          top: 'middle',
          left: '40%',
          itemGap: 13,
          itemHeight: 15,
          itemWidth: 20,
          textStyle: {
            color: 'black',
            rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
              oneone: {
                width: 40,
                color: '#A5AAAD',
                fontSize: 12
              },
              twotwo: {
                width: 35,
                color: '#000',
                fontSize: 12
              },
              threethree: {
                width: 30,
                color: '#000',
                fontSize: 12
              }
            }
          },
          data: ['良好', '一般', '较差'],
         
        },

1.饼状图实现左右布局，且legend居中对齐

效果：

全部代码：

      communityTypeOption: {
        // 提示框组件
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          orient: 'vertical',
          top: 'middle',
          left: '40%',
          itemGap: 13,
          itemHeight: 15,
          itemWidth: 20,
          textStyle: {
            color: 'black',
            rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
              oneone: {
                width: 80,
                color: '#A5AAAD',
                fontSize: 12
              },
              twotwo: {
                width: 35,
                color: '#000',
                fontSize: 12
              },
              threethree: {
                width: 30,
                color: '#000',
                fontSize: 12
              }
            }
          },
          data: ['普通居民住宅', '商住混合楼', '城中村'],
          formatter: (name) => {
            var data = this.communityTypeOption.series[0].data
            var total = 0
            var tarValue
            for (var i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            var v = tarValue
            var p = Math.round((tarValue / total) * 100)
            return `{oneone|${name}}  {twotwo|${v}}   {threethree|${p}%}`
            // return ` ${name}  ${v}  (${p}%)`
          }
        },
        // 定义标题移动到圆环中心
        title: {
          text: '1908',
          // 副标题
          subtext: '小区总数',
          x: 'center',
          y: 'center',
          textAlign: 'center',
          top: '33%',
          left: '18%',
          textStyle: {
            fontSize: 22,
            color: 'black'
          }
        },
        series: [
          {
            type: 'pie',
            // 数组的第一项是内半径，第二项是外半径
            radius: ['45%', '65%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            // 高亮状态的扇区和标签样式。(中间位置显示)
            emphasis: {
              label: {
                show: false,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1048,
                name: '普通居民住宅',
                itemStyle: {
                  color: '#1faaad'
                }
              },
              {
                value: 735,
                name: '商住混合楼',
                itemStyle: {
                  color: '#f8b04b'
                }
              },
              {
                value: 580,
                name: '城中村',
                itemStyle: {
                  color: '#ef6278'
                }
              },
              {
                value: 580,
                name: '其他',
                itemStyle: {
                  color: '#FFA07A'
                }
              }
            ]
          }
        ]
      },