echarts组件——饼图

echarts组件——饼图

饼图，环形图

组件代码

<template>
  <div :class="classname" :style="{height:height,width:width}" />
</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: '100%'
    },
    color: { // 花瓣颜色
      type: Array,
      default: () => ['#5788F7', '#50CD89', '#FFC700', '#895CE8', '#0FC6C2', '#B5BDCB', '#fc8452', '#9a60b4', '#ea7ccc']
    },
    labelshow: { // 是否显示标签
      type: Boolean,
      default: true
    },
    emphasisshow: {
      type: Boolean,
      default: false
    },
    piedata: {
      type: Array,
      default: () => [
        { value: 320, name: 'Industries' },
        { value: 240, name: 'Technology' },
        { value: 149, name: 'Forex' },
        { value: 100, name: 'Gold' }
      ]
    }
  },
  data() {
    return {
      chart: null,
      legenddata: []
    }
  },
  watch: {
    piedata: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.piedata.forEach((item) => {
            this.legenddata.push(item.name)
          })
          this.initChart()
        })
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          data: this.legenddata,
          // orient: 'vertical',
          width: '66%',
          top: '250',
          left: 'center',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 12,
          itemGrap: 10,
          formatter: ['{a|{name}}'].join('\n'),
          textStyle: {
            rich: {
              a: {
                width: 80,
                lineHeight: 20,
                fontSize: 12,
                fontWeight: 400
              }
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [40, 85],
            center: ['50%', '30%'],
            label: {
              show: this.labelshow,
              position: 'inner',
              color: '#ffffff',
              formatter: (params) => {
                if (params.percent) {
                  return `${params.percent}%`
                } else {
                  return ''
                }
              }
            },
            emphasis: {
              label: {
                show: this.emphasisshow
              }
            },
            data: this.piedata,
            animationEasing: 'cubicInOut',
            animationDuration: 2000
          }
        ]
      })
    }
  }
}
</script>

使用组件，传值格式可以看组件的默认数据的格式