动手分装一个饼状图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言
• 一、使用步骤
• 总结

 

---

前言

提示：动手分装一个饼状图

 

一、使用步骤

1.引入库

安装echarts依赖：

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

作者：sjj
链接：https://www.jianshu.com/p/cf0a54374419
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2.新建vue文件

pieChat.vue：

<template>

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

</template>



<script>

import echarts from 'echarts'

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

export default {

  props: {

    className: {

      type: String,

      default: 'chart'

    },

    width: {

      type: String,

      default: '100%'

    },

    height: {

      type: String,

      default: '300px'

    },

    data: {

      type: Array,

      default: function() {}

    },

    xdata: {

      type: Array,

      default: function() {}

    },

    legend: {

      type: Array,

      default: function() {}

    },

    percent: {

      type: Array,

      default: function() {}

    }

  },

  data() {

    return {

      chart: null

    }

  },

  mounted() {

    this.$nextTick(() => {

      this.initChart()

    })

  },

  beforeDestroy() {

    if (!this.chart) {

      return

    }

    this.chart.dispose()

    this.chart = null

  },

  methods: {

    initChart() {

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



      this.chart.setOption({

        backgroundColor: '#fff',

        tooltip: {

          trigger: 'item',

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

        },

        color: ['#3ba0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'],

        legend: {

          orient: 'vertical',

          right: 'right',

          left: '60%',

          top: '20%',

          icon: 'circle',

          width: '10%',

          data: this.xdata,

          itemGap: 16, // 设置legend的间距

          formatter: (name) => {

            let index = 0

            this.xdata.forEach((value, i) => {

              if (value === name) {

                index = i

              }

            })

            return '{a|' + name + '}' + '|    ' + '{a|' + this.percent[index] + '}' + this.legend[index]

          }

        },

        textStyle: {

          rich: {

            a: {

              width: 70

            }

          }

        },

        series: [

          {

            name: '',

            type: 'pie',

            radius: ['50%', '70%'],

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

            label: {

              formatter: '{per|{d}%}  ',

              rich: {

                a: {

                  color: '#999',

                  lineHeight: 22,

                  align: 'center'

                },

                b: {

                  fontSize: 16,

                  lineHeight: 33

                }

              }

            },

            data: this.data,

            itemStyle: {

              borderWidth: 5, // 设置border的宽度有多大

              borderColor: '#fff'

            },

            emphasis: {

              itemStyle: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: '#fff',

                borderWidth: 0, // 设置border的宽度有多大

                borderColor: '#fff'

              }

            }

          }

        ]

      })

    }

  }

}

</script>

<style scoped>

.line-chart-box{

  /* width: 100%; */

  height: 350px;

}

.chart{

  margin-left: 2.5%;

  margin-bottom: 30px;

}

</style>

3.使用

import PieChart from 'PieChart'

<template>

<div>

<pie-chart :data="dataChart" :xdata="xdata" :legend="legend" :percent="percent"/>

</div>

</template>



data数据

data() {

return {

dataChart: [

        { value: 335, name: '姓名1' },

        { value: 310, name: '姓名2' },

        { value: 234, name: '姓名3'},

        { value: 135, name: '姓名4' },

        { value: 1548, name: '姓名5' }

      ],

xdata: ['姓名1', '姓名2', '姓名3', '姓名4', '姓名5'],

legend: [

        '335', '310', '234', '135', '1548'

      ],

percent: ['13.08%', '12.1%', '9.13%', '5.27%', '60.42%'],

}

}

---

展示