pieChart

npm i echarts ---save-dev

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

chart

<template>
<div class="chart">
</div>
</template>
<script>
export default {
  data() {
    return {
      color: ["#4DB628", "#1CDE8E", "#3CE7F2", "#2E81FF", "#8B3BF8", "#D03B7A", "#FF8523", "#F4C60D"],
      data:[{
          value: 335,
          name: '别墅类房地产'
        },
        {
          value: 310,
          name: '具有别墅风格的经营性项目'
        },
        {
          value: 234,
          name: '私家庄园'
        },
        {
          value: 135,
          name: '私人别墅'
        }
      ],
      total: 0,
      myChart: {}
    }
  },
  mounted() {
    let _this = this;
    _this.init()
    setTimeout(() => {
      _this.myChart.resize()
    }, 1000)
    window.addEventListener("resize", function() {
      _this.myChart.resize()
    })
  },
  methods: {
    init() {
      this.data = this.pieData
      for (var i = 0; i < this.data.length; i++) {
        this.total += this.data[i].value
      }
      this.drawLine();
    },
    drawLine() {
      this.myChart = this.$echarts.init(this.$el)
      let self = this
      this.myChart.clear()
      // 绘制图表
      this.myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: '总数',
          subtext: self.total,
          textStyle: {
            color: '#333',
            fontSize: 14,
            align: 'center'
          },
          subtextStyle: {
            fontSize: 24,
            color: '#333',
            fontWeight: 'bold',
          },
          x: 'center',
          y: '44%',
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}"
        },
        legend: {
          show: false
        },
        color: self.color,
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['35%', '45%'],
            center: ['50%', '50%'],
            data: self.data,
            label: {
              normal: {
                show: true,
                formatter: "{b} \n {num|{c}}",
                fontSize: 14,
                rich: {
                  num: {
                    lineHeight: 24,
                    fontSize: 14,
                    align: 'center'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                borderColor: 'rgba(255, 255, 255, 1)',
                borderWidth: 0,
              },
            }
          },
          {
            name: '外边框',
            type: 'pie',
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['47%', '47.6%'],
            label: {
              normal: {
                show: false
              }
            },
            data: self.data,
          },
        ]
      });
    }
  },
}
</script>
<style lang="scss" scoped>

</style>