vue-饼形图-详细

显示效果

代码

<template>

  <div style="height: 350px;">

    <div :class="className" :style="{height:height,width:width}"></div>

  </div>

</template>

<script>

import * as echarts from 'echarts';

require('echarts/theme/macarons') // echarts theme

import resize from './mixins/resize'

export default {

  mixins: [resize],

  props: {

    className: {

      type: String,

      default: 'chart'

    },

    width: {

      type: String,

      default: '100%'

    },

    height: {

      type: String,

      default: '300px'

    }

  },

  data() {

    return {

      chart: null,

      pieChartData:[

          { value: 320, name: '找工作' },

          { value: 240, name: '广告推广' },

          { value: 149, name: '二手物品' },

          { value: 100, name: '二手车' },

          { value: 59, name: '拼车出行' },

          { value: 59, name: '宠物出售' },

          { value: 59, name: '房屋出售' },

          { value: 59, name: '上门出售' }

      ]

    }

  },

  mounted() {

    this.$nextTick(() => {

      this.initChart()

    })

  },

  beforeDestroy() {

    if (!this.chart) {

      return

    }

    this.chart.dispose()

    this.chart = null

  },

  methods: {

    initChart() {

      // 计算百分比

      let mdataList = this.pieChartData

      let total = 0

      const target = new Map();              

      mdataList.forEach((item) => {

          // 计算value的和，用来算百分比

          total += item.value

          // 组成 map {A:1212} ,用来下面获取 value

          target.set(item.name, item.value)

      })

      this.chart = echarts.init(this.$el, 'macarons');

      this.chart.setOption({

        tooltip: {

          trigger: 'item',

          formatter: '{a} <br/>{b} : {c} ({d}%)'

        },

        legend: {

          left: 'right',

          orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'

          top: '50',

          data: ['找工作', '广告推广', '二手物品', '二手车', '拼车出行','宠物出售','房屋出售','上门出售'],

          formatter: function(name) {

            let lists = [];

            let inum = target.get(name) / total * 100;

            //保留inum小数点后２位

            let vnum = parseFloat(inum).toFixed(2);

            lists.push(name + '－' + vnum + '%');

            return lists;

          },

        },

        title: {

          text: '分类统计',

          left: 'left',

        },

        series: [

          {

            name: '分类统计',

            type: 'pie',

            roseType: 'radius',

            radius: [15, 95],

            center: ['35%', '50%'],

            data: this.pieChartData,

            animationEasing: 'cubicInOut',

            animationDuration: 2600

          }

        ]

      })

    }

  }

}

</script>