echarts 环形图 - 技术栈

环形图封装成了一个组件组件名diagran.vue

javascript 复制代码

<!--环形图-->
<template>
  <div class='chartPreDonut' ref='chartPreDonut'></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['option', 'unit', 'title', 'center', 'legend', 'legendTop'],
  data () {
    return {
      chartDom: null,
      chartData: this.option
    }
  },
  watch: {
    option: {
      handler (val) {
        this.chartData = val
        this.$nextTick(() => {
          this.chartInit()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.chartInit()
    })
  },
  methods: {
    chartInit () {
      this.chartDom = echarts.init(this.$refs.chartPreDonut)

      const options = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return `${params.name}:${params.value}${this.unit || ''}${params.data.rate ? `<br /> 占比${params.percent}%` : ''}`
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: {
              show: true,
              position: 'outside',
              formatter: (params) => {
                return `${params.name}:${params.value}${this.unit || ''}${params.data.rate ? `\n占比${params.percent}%` : ''}`
              },
              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 5,
                lineStyle: {
                  width: 1
                }
              }
            },
            center: this.center || ['50%', '50%'],
            data: this.chartData
          }
        ]
      }

      if (this.legend) {
        options.legend = {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: this.legendTop || 100,
          bottom: 20,
          data: this.chartData.map(m => { return m.name })
        }
      }

      if (this.title) {
        options.title = {
          text: this.title,
          top: '44%',
          textAlign: 'center',
          left: '49.50%',
          textStyle: {
            color: '#104fa7',
            fontSize: 15,
            fontWeight: '400'
          }
        }
      }

      this.chartDom.setOption(options)
      window.addEventListener('resize', () => {
        this.chartDom.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chartPreDonut {
  width: 100%;
  height: 100%;
}
</style>

页面引入组件

javascript 复制代码

<template>
  <div>
    <div class="left-charts">
      <Diagran :option='option' unit="人次" />
    </div>
  </div>
</template>

<script>
import Diagran from './diagran.vue'
export default {
  data () {
    return {
      option: [
        {
          "value": 11111,
          "name": "测试1"
        },
        {
          "value": 22222,
          "name": "测试2"
        },
        {
          "value": 33333,
          "name": "测试3"
        },
        {
          "value": 444444,
          "name": "测试4"
        },
        {
          "value": 555555,
          "name": "测试5"
        },
        {
          "value": 66666,
          "name": "测试6"
        },
        {
          "value": 77777,
          "name": "测试7"
        },
        {
          "value": 88888,
          "name": "测试8"
        }
      ]
    }
  },
  components: {
    Diagran
  }
}
</script>

<style lang="less" scoped>
.left-charts {
  width: calc(100% - 140px);
  height: 500px;
}
</style>