基于echarts对饼图的封装

悠悠 2022-12-24 02:58 205阅读 0赞

## 核心库 ##

*  echarts
 *  lodash
 *  ResizeListener

## 代码 ##

<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>

## 使用 ##

<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>

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/75637c0052b447bbaefda5f4ec41168c.png