环形图基本配置项

前言

因为echarts官网的配置文档太乱了，所以自己写一个此类图表基本的配置方便查看。

配置项

options: {
  color: ['#88b469', '#f1a457', '#5473e5', '#aa93e5'],
  legend: { //配置图中右侧的4个label，数值别加引号，如：20 -> '20'
    orient: 'vertical', //排列方向-竖向
    itemGap: 20, //元素相隔距离，
    itemWidth: 8, //色块宽度
    itemHeight: 8, //色块高度
    left: '52%',
    top: '20%',
    //文字处理函数，只有一个形参：name
    formatter: (name) => {
      let value = 0
      this.data.forEach((item) => {
        if (name === item.name) value = item.value
      })
      //echarts的模板字符为`{样式名|返回值}`
      return `{a|${name}}: {b|${value}}`
    },
    //配置模板字符的样式，结合文字处理函数使用
    textStyle: {
      rich: {
        a: {
          fontSize: 16,
          fontFamily: 'Alibaba PuHuiTi',
          color: '#51565B'
        },
        b: {
          fontSize: 20,
          fontFamily: 'DIN',
          color: '#393D44'
        }
      }
    }

  },
  series: [
    {
      name: '项目投标报备统计',
      type: 'pie',
      radius: ['56%', '66%'], //圆环的宽度，两个值越接近，宽度越小
      center: ['150px', '51%'], //圆环位置
      avoidLabelOverlap: false, //避免标签重叠
      itemStyle: { //各元素的边框，主要用于做元素相隔距离
        borderRadius: 1,
        borderColor: '#fff',
        borderWidth: 4
      },
      // 圆环中间的总计文字
      label: {
        position: 'center',
        // 同上
        formatter: (params) => {
          let sum = 0;
          this.data.forEach((item) => {
            sum += item.value;
          })
          return `{a|总计}\n\n{b|${sum}}`
        },
        // 同上，但不用textStyle包裹了
        rich: {
          a: {
            fontSize: 16,
            fontFamily: 'Alibaba PuHuiTi',
            color: '#51565B'
          },
          b: {
            fontFamily: 'DIN',
            fontSize: 24,
            color: '#4B7DEE'
          }
        },
        data: []
      }
    }
  ]
}

完整代码

<script>
import * as echarts from 'echarts'

export default {
  name: 'Rt',
  data() {
    return {
      spinning: true,
      data: [
        { value: 552, name: '地理信息' },
        { value: 377, name: '测绘' },
        { value: 193, name: '国土空间规划' },
        { value: 212, name: '遥感' }
      ],
      objCharts: null,
      options: {
        color: ['#88b469', '#f1a457', '#5473e5', '#aa93e5'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          itemGap: 20,
          itemWidth: 8,
          itemHeight: 8,
          left: '52%',
          top: '20%',
          formatter: (name) => {
            let value = 0
            this.data.forEach((item) => {
              if (name === item.name) value = item.value
            })
            return `{a|${name}}: {b|${value}}`
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontFamily: 'Alibaba PuHuiTi',
                color: '#51565B'
              },
              b: {
                fontSize: 20,
                fontFamily: 'DIN',
                color: '#393D44'
              }
            }
          }

        },
        series: [
          {
            name: '项目投标报备统计',
            type: 'pie',
            radius: ['56%', '66%'],
            center: ['150px', '51%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 4
            },
            label: {
              position: 'center',
              formatter: (params) => {
                let sum = 0
                this.data.forEach((item) => {
                  sum += item.value
                })
                return `{a|总计}\n\n{b|${sum}}`
              },
              rich: {
                a: {
                  fontSize: 16,
                  fontFamily: 'Alibaba PuHuiTi',
                  color: '#51565B'
                },
                b: {
                  fontFamily: 'DIN',
                  fontSize: 24,
                  color: '#4B7DEE'
                }
              },
              data: []
            }
          }
        ]
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.initChart()
    }, 1500)
  }
  ,
  methods: {
    initChart() {
      const _this = this
      _this.objCharts = echarts.init(document.querySelector('#homeRtChart'))

      _this.options.series[0].data = _this.data
      _this.objCharts.setOption(_this.options)
      this.spinning = false
    }
  }
}
</script>

<template>
  <a-spin :spinning="spinning" tip="数据加载中...">
    <div id="homeRtChart" :class="[!spinning ? 'cx':'']">
    </div>
  </a-spin>
</template>

<style scoped lang="less">
#homeRtChart {
  width: 100%;
  height: 240px;
  position: relative;
  z-index: 9;

  &.cx {
    &::before {
      content: "";
      top: 32px;
      left: 57px;
      width: 183px;
      height: 183px;
      position: absolute;
      background: url("~@/assets/images/home/rtbg.png") no-repeat;
      z-index: 10;
    }
  }


}
</style>