基于echarts对饼图的封装

核心库

• echarts
• lodash
• ResizeListener

代码

<!--
 * @Author: your name
 * @Date: 2020-11-04 10:39:39
 * @LastEditTime: 2020-11-26 14:11:28
-->
<template>
    <div class="charts" ref="charts"></div>
</template>

<script>
import echarts from 'echarts';
import { merge } from 'lodash';
import ResizeListener from 'element-resize-detector';

export default {
    name: 'ChartBar',
    props: {
        extraOption: { // 其他配置项
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        extraOption: {
            immediate: true,
            deep: true,
            handler () {
                this.updateChartView();
            }
        },
    },
    data () {
        return {
            myChart: null, // 图表对象
            option: { // 配置项
                avoidLabelOverlap: true,
                legend: {
                    itemHeight: 14,
                    itemWidth: 14,
                    icon: "circle",
                    orient: 'vertical',
                    zlevel: 999,
                    z: 999,
                    left: '62%',
                    top: '20%',
                    data: [],
                    formatter: (name) => {
                        const arr = [
                            '{aa|' + name + '}'
                        ]
                        return arr.join('')
                    },
                    textStyle: {
                        rich: {
                            aa: {
                                fontSize: 14,
                                color: '#666666',
                                fontWeight: 'normal',
                                padding: [-2, 0, 0, 5],
                                lineHeight: 18
                            },
                        }
                    },
                    selectedMode: false, // 图例是否可点击
                },
                tooltip: {
                    confine: true, // 将图表限制在区域内
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['0', '66%'],
                        center: ['30%', '52%'],
                        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                        hoverAnimation: true, // 鼠标移入的动画效果
                        hoverOffset: 4,
                        data: [],
                    }
                ],
                color: ['#1fa776', '#f6b239', '#1fb8f1', '#ff9f7f', '#fb7293', '#67e0e3', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff', '#859e41', '#9e7341', '#78419e', '#9e416d', '#414c9e'],
            },
        }
    },
    methods: {

        updateChartView () { // 更新视图
            if (!this.myChart) return;
            const fullOption = this.mergeDataToOption();
            this.myChart.setOption(fullOption, true);
            // 设置饼图默认选中一个
            this.selectedOnePie();
        },

        mergeDataToOption () { // 合并并将数据加入到配置项
            return merge(
                {},
                this.option,
                this.extraOption
            )
        },

        selectedOnePie () { // 默认选中一个饼图项
            this.myChart.dispatchAction({ type: 'highlight', dataIndex: 0 }); // dataIndex属性为data传入的索引值
            this.myChart.on('mouseover', (e) => {
                if (e.dataIndex !== 0) { // 当鼠标移入的时候 使默认的索引值去除默认选中
                    this.myChart.dispatchAction({ type: 'downplay', dataIndex: 0 });
                }
            });
            this.myChart.on('mouseout', (e) => { // 当鼠标移出的时候，默认选中一项
                this.myChart.dispatchAction({ type: 'highlight', dataIndex: 0 });
            });
        },

        addChartResizeListener () { // 监听元素变化
            // 创建实例带参
            const instance = ResizeListener({
                strategy: 'scroll',
                callOnAdd: true
            });

            // 监听元素大小的变化
            instance.listenTo(this.$refs.charts, () => {
                if (!this.myChart) return;
                this.myChart.resize();
            });
        },

        handleClick () { // 点击图表触发
            this.myChart.on('click', (event) => {
                this.$emit('chart_click', event);
            });
        }
    },
    mounted () {
        if (!this.myChart) {
            // 初始化图表
            this.myChart = echarts.init(this.$refs.charts);

            // 绘制图表
            this.updateChartView();

            // 设置饼图默认选中一个
            this.selectedOnePie();

            // 监听元素大小变化
            this.addChartResizeListener();

            // 绑定点击事件
            this.handleClick();
        }
    },
}
</script>

<style lang="less" scoped>
    .charts {
        width: 100%;
        height: 100%;
    }
</style>

使用

<!--
 * @Author: your name
 * @Date: 2020-10-28 15:36:35
-->
<template>
    <div>
        <!-- 电能表生命周期分布 -->
        <template v-if="extraOption.series[0].data && extraOption.series[0].data.length > 0">
            <ChartPie :extraOption="extraOption"></ChartPie>
            <div class="unit">单位：只</div>
        </template>
        <noDataChartsImg v-else></noDataChartsImg>
    </div>
</template>

<script>
import lodash from 'lodash';
import { getLifeCycleDistributionData } from '@/api/assetsAnalysisKanban/assetsStatusKanbanQuery';
import ChartPie from '@/view/streamline/assetsAnalysisKanban/common/charts/ChartPie';
import noDataChartsImg from '../../common/chartsImg';

export default {
    components: {
        ChartPie,
        noDataChartsImg
    },
    props: {
        chartsParams: { // 需要请求的接口参数
            type: Object,
            default: () => {}
        }
    },
    watch: {
        chartsParams: {
            handler (val) {
                if (!lodash.isEmpty(val)) {
                    this.getChartData(val);
                }
            },
            immediate: true,
            deep: true
        }
    },
    data () {
        return {
            extraOption: {
                avoidLabelOverlap: true,
                legend: {
                    // data: ['安装运行', '仓库存储', '配送', '拆回', '报废', '安装运行1', '仓库存储2', '配送3', '拆回4', '报废5'],
                    data: [],
                    top: 'middle',
                    height: 160,
                    left: '56%',
                    type: 'scroll',
                    pageIconColor: '#2f4554', // 翻页按钮的颜色
                    pageIconInactiveColor: '#aaa', // 翻页按钮不激活时（即翻页到头时）的颜色
                    pageIconSize: 10, // 翻页按钮大小
                    pageFormatter: ({current, total}) => {
                        return `${current}/${total}`;
                    }, // 隐藏翻页的数字
                    pageButtonGap: 10, // 图例控制块和图例项之间的间隔
                    pageButtonPosition: 'end', // 'end' 'start
                    pageButtonItemGap: 6, // 翻页按钮的两个之间的间距
                    bottom: '12%',
                    formatter: (name, index) => {
                        let value = 0;
                        let text = '';
                        this.extraOption.series[0].data.forEach((item, index) => {
                            if (item.name === name) {
                                text = name.length > 5 ? name.substring(0, 5) + '...' : name;
                                value = item.value
                            }
                        })
                        const arr = [
                            '{aa|' + text + '}',
                            '{bb|' + value + '只}'
                        ]
                        return arr.join('')
                    },
                    textStyle: {
                        rich: {
                            aa: {
                                fontSize: 14,
                                color: 'rgba(102, 102, 102, 1)',
                                fontWeight: 'normal',
                                padding: [-2, 0, 0, 2],
                                lineHeight: 18,
                                width: 66
                            },
                            bb: {
                                fontSize: 14,
                                color: 'rgba(51, 51, 51, 1)',
                                fontWeight: 'normal',
                                padding: [-2, 0, 0, 5],
                                lineHeight: 18
                            },
                        }
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) { // 提示内容太多隔行显示内容
                        const str = `${params.marker} ${params.name} : ${params.value}只`
                        return str
                    },
                },
                series: [
                    {
                        radius: ['45%', '60%'],
                        center: ['28%', '51%'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                formatter: (item) => {
                                    const arr = [
                                        '{a|' + item.percent + '}',
                                        '{b|' + '%}\n',
                                        '{c|' + (item.name.length > 8 ? item.name.substring(0, 8) + '...' : item.name) + '}'
                                    ]
                                    return arr.join('')
                                },
                                rich: {
                                    a: {
                                        color: '#64879f',
                                        fontSize: '24'
                                    },
                                    b: {
                                        color: '#64879f',
                                        fontSize: '24',
                                        verticalAlign: 'middle'
                                    },
                                    c: {
                                        color: '#666666',
                                        fontSize: '13',
                                        verticalAlign: 'middle'
                                    }
                                }
                            },
                            emphasis: { // 高亮的图形样式和标签样式
                                show: true
                            },
                        },
                        data: [
                            // {value: 335, name: '安装运行'},
                            // {value: 310, name: '仓库存储'},
                            // {value: 234, name: '配送'},
                            // {value: 135, name: '拆回'},
                            // {value: 234, name: '报废'},
                            // {value: 335, name: '安装运行1'},
                            // {value: 310, name: '仓库存储2'},
                            // {value: 234, name: '配送3'},
                            // {value: 135, name: '拆回4'},
                            // {value: 234, name: '报废5'}
                        ],
                    }
                ],
            },
        }
    },
    methods: {
        getChartData (data) { // 获取图表数据
            const params = {
                equipCateg: data.equipCateg, // 设备类型
                orgNo: data.orgNo // 组织树
            }
            getLifeCycleDistributionData(params).then((res) => {
                const jsonData = res.data;
                if (jsonData.status === 1 && jsonData.code === 200 && !lodash.isEmpty(jsonData.data)) {
                    const chartsData = jsonData.data.chartsData;
                    this.extraOption.legend.data = chartsData.legendData;
                    this.extraOption.series[0].data = chartsData.seriesData;
                }
            })
        }
    },
    mounted () {
    },
}
</script>

<style lang="less" scoped>
.unit {
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
}

.commonPieImg {
    position: absolute;
    width: 300px;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -25%);
}
</style>

效果图