Vue 封装echarts饼状图（Pie）组件

目的：减少重复代码，便于维护

效果显示：

组件代码

javascript 复制代码

<template>
    <div class="ldw-data-content-box">
        <div class="ldw-chilren-box">
            <div class="title">
                <div>{{ title }}</div>
                <div class="btn">
                    <slot></slot>
                </div>
            </div>
            <div v-if="row" class="ldw-row-class">
                <div class="canvas-box">
                    <div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div>
                </div>
                <div class="quan-quan-box" style="justify-content: space-evenly;">
                    <div class="ldw-quan-quan" style="width:100%;" v-for="(item,index) in data" :key="index">
                        <div class="ldw-quan-box" :style="{background:item.ldwColor.length?`linear-gradient(0deg,${item.ldwColor[0]},${item.ldwColor[1]})`:''}"></div>
                        <div class="ldw-text-text ldw-w" :style="'width:'+item.w+'px'">{{item.name}}</div>
                        <div>：</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
            <div style="width:100%;flex:1;display: flex;flex-flow: column;" v-else>
                <div style="width:100%;flex:1;">
                    <div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div>
                </div>
                <div :style="{'height':h+'px','marginTop':top+'px','margin':'0 auto'}" :class="column?'flex-column':'flex-center-sp flex flex-center-cz flex-col'">
                    <div class="ldw-quan-quan" :class="column?'flex-center-sp':''" v-for="(item,index) in data" :key="index">
                        <div class="ldw-quan-box" :style="{background:item.ldwColor.length?`linear-gradient(0deg,${item.ldwColor[0]},${item.ldwColor[1]})`:''}"></div>
                        <div v-if="column">{{item.name}}</div>
                        <div v-else class="ldw-text-text ldw-w" :style="'width:'+item.w+'px'">{{item.name}}</div>
                        <div>：</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var echarts = require("echarts");
const total = function(data){
    return data.reduce((prev,cur)=>{
        return prev+cur.value
    },0)
}
export default {
    props:{
        title:"",
        data:{
            require:true,
            type:Array,
            default:()=>[]
        },
        w:{
            type:String,
            default:"auto"
        },
        column:{
            type:Boolean,
            default:true
        },
        row:{
            type:Boolean,
            default:false
        },
        listH:{
            type:Number,
            default:56
        },
        label:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            bg:["#0090FF","#31CFB8","#E55240"],
            number:null,
            top:0,
            h:56,
            myChart:null
        }
    },
    watch: {
        data: {
            //深度监听，可监听到对象、数组的变化
            handler(val, oldVal) {
                if (val != null) {
                    this.setOption();
                }
                
            },
            deep: true, //true 深度监听
        },
        listH:{
            //深度监听，可监听到对象、数组的变化
            handler(val, oldVal) {
                this.h  = val
            },
        }
    },
    created(){
        this.h = this.listH
        this.number = Math.random(1000)+1;
    },
    mounted(){
        this.initData()
    },
    methods:{
        initData(){
            let canvas = document.getElementById(`canvas-box${this.number}`)
            this.myChart = echarts.init(canvas);
            this.setClick()
            this.setOption()
        },
        setClick(){
            let that = this
            this.myChart.on("click", function(params) {
                that.$emit('eClick',params)
            });
        },
        setOption(){
            let option = {
                title: {
                    text:'总计',//主标题文本
                    subtext:""+total(this.data),//副标题文本
                    left:'center',
                    top:'40%',
                    textStyle:{
                        fontSize: 16,
                        color:'#6c7a89',
                        align:'center'
                    },
                    subtextStyle:{
                        fontFamily : "微软雅黑",
                        fontSize: 26,
                        color:'#060606',
                        fontWeight:600
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    show:false
                },
                series: [
                    {
                        name:this.title,
                        type: 'pie',
                        radius: ['55%', '80%'],
                        avoidLabelOverlap: false,
                        label: this.labelFn(this.label),
                        labelLine: this.labelLineFn(this.label),
                        data: this.colorFormat(this.data)
                    }
                ]
            };

            this.myChart.setOption(option)
        },
        resize(){
            this.myChart.resize()
        },
        labelColor(){
            arr.forEach((item)=>{
                if(item.ldwColor){
                    item.itemStyle = {
                        color:{
                        }
                    }
                }
            })
            return arr
        },
        colorFormat(arr){
            arr.forEach((item)=>{
                if(item.ldwColor){
                    item.itemStyle = {
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: item.ldwColor[0] // 0% 处的颜色
                            }, {
                                offset: 1, color: item.ldwColor[1] // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            })
            return arr
        },
        labelFn(state){
            if(state){
                return {
                    color: 'inherit',
                    fontWeight:"bold",
                    fontSize:12,
                    padding:[0,-60],
                    formatter:(params)=>{
                        return `${params.name}\n${(params.value/total(this.data)*100).toFixed(1)}%\n\n`
                    }
                }
            }else{
                return {
                    show:false
                }
            }
        },
        labelLineFn(state){
            if(state){
                return {
                    smooth: 0.2,
                    length: 10,
                    length2: 70
                }
            }else{
                return {
                    show:false
                }
            }
        }
    }
}
</script>

<style scoped>
.ldw-data-content-box{
    width:100%;
    height:100%;
    display: flex;
}

.ldw-data-content-box>.ldw-chilren-box{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    overflow: hidden;
}
.ldw-data-content-box>.ldw-chilren-box>.title{
    font-size: 18px;
    color:#000;
    text-align: center;
    padding:24px 0;
    width:100%;
    position: relative;
}

.ldw-bg-box{
    background: rgba(255,255,255,0.5);
    border: 1px solid #F4FDFE;
    border-radius: 20px;
}

.ldw-text-text{
	display: inline-block;
	text-align: justify;
	line-height: 0;
	margin-left: 20px;
}

.ldw-text-text::after{
	content:"";
	display: inline-block;
	width:100%;
	overflow:hidden;
	height:0;
}

.ldw-quan-quan{
    width:100%;
    display: flex;
    align-items: center;
}

.ldw-w{
    margin-top:6px;
    position: relative;
}

.ldw-quan-box{
    width: 13px;
    height: 13px;
    border-radius: 2px;
    margin-right: 20px;
}

.flex-column{
    width:100%;
    display: flex;
    justify-content: space-around;
}

.flex-column .ldw-w{
    width: auto;
}

.flex-column .ldw-quan-box{
    margin-right: 10px;
}

.btn{
    position: absolute;
    right: 50px;
    top:50%;
    transform: translateY(-50%);
}

.ldw-row-class{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding:0 20px;
}

.canvas-box{
    text-align: center;
    width:65%;
    height: 100%;
}

.quan-quan-box{
    width:35%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.m-m-m{
    margin: 0 auto;
}
</style>

调用代码

javascript 复制代码

<template>
    <div class="root flex flex-col border-box">
        <div  style="width: 400px; height: 400px;"  >
            <Pie  :title="'统计'"  :data="list" ></Pie>
        </div>
    </div>
</template>

<script>
    import Pie from '@/components/echarts/pieInfo.vue'

    export default{
        name:'',
        created() {
        },
        mounted() {
            this.list = this.chartData
        },
        components: {Pie},
        data() {
            return {
                list:[],
                chartData:
                [
                    {value:100, type:'一季度'},
                    {value:105, type:'二季度'},
                    {value:201, type:'三季度'},
                    {value:167, type:'四季度'},
                ]
            }
        },
        methods:{
        }
    }
</script>