vue自定义组件——饼图例子

vue自定义组件——饼图例子

问题背景

vue中自定义组件是很正常的场景，有很多场景可能需要用到，本文介绍vue中自定义组件的一般操作，使用一个自定义饼图demo举例。

问题分析

（1）Vue中的自定义组件可以通过创建.vue文件来实现。下面是自定义饼图组件的代码。新增文件，pieChart.vue，代码如下：

<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>
  
<script>
import * as 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: '100px'
        },
        autoResize: {
            type: Boolean,
            default: false
        },
        color: {
            type: String,
            default: '#fff'
        },
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        option() {
            if (this.chart) {
                this.chart.setOption(); // 设置对应配置项
            }
        }
    },
    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.setOptions()
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    // 设置饼图标题，位置设为顶部居中
                    text: "Ld",
                    top: "-4%",
                    left: "10%",

                },
                series: [
                    {
                        name: 'Ln1',
                        type: 'pie',
                        startAngle: 270,                        // 环图起始位置：正下方
                        center: ['25%', '45%'],                 // 圆环中心相对于容器位置
                        radius: ['40%', '50%'],                 // 圆环内径外径
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: 'Ln'
                            }

                        },

                        data: [{
                            name: 'Ln1占比',
                            value: (90 / 360) * 100,

                            itemStyle: {
                                normal: {
                                    color: this.color
                                }
                            }
                        }, {
                            name: '总数',
                            value: 100 - (90 / 360) * 100,
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 0
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#02364F'
                                },
                                emphasis: {
                                    color: '#02364F'
                                }
                            },
                            hoverAnimation: false
                        }]
                    },
                    {
                        name: '',
                        type: 'pie',
                        startAngle: 270,                        // 环图起始位置：正下方
                        center: ['25%', '45%'],                 // 圆环中心相对于容器位置
                        radius: ['20%', '30%'],                 // 圆环内径外径
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: 'Ln'
                            }

                        },

                        data: [{
                            name: 'Ln1占比',
                            value: (40 / 360) * 100,

                            itemStyle: {
                                normal: {
                                    color: '#02364F'
                                },
                                emphasis: {
                                    color: '#02364F'
                                }
                            }
                        }, {
                            name: '总数',
                            value: 100 - (40 / 360) * 100,
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 0
                                }
                            },
                            itemStyle: {
                                normal: {

                                    color: this.color
                                }
                            },
                            hoverAnimation: false
                        }]
                    },
                ]
            })
        }
    }
}
</script>

（2）然后，我们需要将该自定义组件注册到其他地方使用。比如在App.vue或者其他单文件组件中引入并注册，代码如下：

<template>
  <div class="outer">
    <piecharts width="200px" height='100px' :color="color1" />
    <piecharts width="200px" height='100px' :color="color2" />
    <piecharts width="200px" height='100px' :color="color3" />
    <piecharts width="200px" height='100px' :color="color4" />
    <piecharts width="200px" height='100px' :color="color5" />
    <piecharts width="200px" height='100px' :color="color6" />
  </div>
</template>
 
<script>
import piecharts from './utils/echartsSet/pieEchart.vue';
export default {
  data() {
    return {
      color1: "#8A2BE2",
      color2: "#483D8B",
      color3: "#0000FF",
      color4: "#00FFFF",
      color5: "#7FFF00",
      color6: "#FFD700",
      color7: "#8A2BE2",
    }
  },
  components: {
    piecharts // 局部注册我们引入的自定义组件。
  },
  methods: {
  }
}
</script>

<style>
.outer {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>

运行结果如下：

问题总结

本文介绍了vue中自定义组件的一般操作，使用一个自定义饼图demo举例，有兴趣的同学可以进一步深入学习vue组件相关内容。