基于echarts对折线图的封装

雨点打透心脏的1/2处 2022-12-24 02:58 194阅读 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: {  // 配置项
                    backgroundColor: '#fff',
                    tooltip: { 
                        trigger: 'axis',
                        confine: true, // 将图表限制在区域内
                        axisPointer: {  // 坐标轴指示器配置项
                            type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
                            crossStyle: { 
                                color: '#999'
                            }
                        }
                    },
                    grid: { 
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        top: '6%',
                        containLabel: true
                    },
                    legend: { 
                        orient: 'horizontal',
                        itemHeight: 14,
                        itemWidth: 14,
                        icon: "circle",
                        formatter: (name) => { 
                            const arr = [
                                '{aa|' + name + '}'
                            ]
                            return arr.join('')
                        },
                        textStyle: { 
                            rich: { 
                                aa: { 
                                    fontSize: 14,
                                    color: '#666666',
                                    fontWeight: 'normal',
                                    padding: [-2, 0, 0, 0],
                                    lineHeight: 18
                                },
                            }
                        }
                    },
                    xAxis: [
                        { 
                            type: 'category',
                            data: [],
                            axisLabel: { 
                                color: '#333',
                                textStyle: { 
                                    fontSize: 12
                                },
                            },
                            splitLine: { 
                                show: false,
                                lineStyle: { 
                                    color: '#c6d4e1',
                                    width: 1,
                                    type: 'dotted'
                                }
                            },
                            axisTick: { 
                                show: false
                            },
                            axisLine: { 
                                show: false
                            },
                        }
                    ],
                    yAxis: { 
                        type: 'value',
                        axisLabel: { 
                            color: '#333',
                            textStyle: { 
                                fontSize: 12
                            },
                        },
                        splitLine: { 
                            show: true,
                            lineStyle: { 
                                color: '#c6d4e1',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisTick: { 
                            show: false
                        },
                        axisLine: { 
                            show: false
                        },
                    },
                    series: [
                        { 
                            name: '',
                            type: 'line',
                            smooth: true,
                            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);
            },
    
            mergeDataToOption () {  // 合并并将数据加入到配置项
                return merge(
                    { },
                    this.option,
                    this.extraOption
                )
            },
    
            addChartResizeListener () {  // 监听元素变化
                // 创建实例带参
                const instance = ResizeListener({ 
                    strategy: 'scroll',
                    callOnAdd: true
                });
    
                // 监听元素大小的变化
                instance.listenTo(this.$refs.charts, () => { 
                    if (!this.myChart) return;
                    this.myChart.resize();
                });
            }
        },
        mounted () { 
            if (!this.myChart) { 
                // 初始化图表
                this.myChart = echarts.init(this.$refs.charts);
    
                // 绘制图表
                this.updateChartView();
    
                // 监听元素大小变化
                this.addChartResizeListener();
            }
        },
    }
    </script>
    
    <style lang="less" scoped>
    .charts { 
        width: 100%;
        height: 100%;
    }
    </style>

## 使用 ##

<template>
        <div>
            <div class="query_criteria">
                <Row>
                    <Col>
                        设备类别 <Select v-model="equipType" @on-change="handleChangeEquipCategory" size="small">
                            <Option
                                v-for="item in equipCategory"
                                :value="item.dictid"
                                :key="item.dictid"
                                >
                                { {  item.dictname }}
                            </Option>
                        </Select>
                    </Col>
                </Row>
            </div>
            
            <ChartLine :extraOption="extraOption" v-if="extraOption.series && extraOption.series.length > 0"></ChartLine>
            <noDataChartsImg chartPicType="line_char_pic" v-else></noDataChartsImg>
        </div>
    </template>
    
    <script>
    import lodash from 'lodash';
    import dateFormat from "dateformat";
    import {  getTrendAnalysis } from '@/api/assetsAnalysisKanban/assetsDivestitureAnalysisQuery';
    import ChartLine from '@/view/streamline/assetsAnalysisKanban/common/charts/ChartLine';
    import noDataChartsImg from '../../common/chartsImg';
    
    export default { 
        components: { 
            ChartLine,
            noDataChartsImg
        },
        props: { 
            paramsGroup: { 
                type: Object,
                default: () => { }
            },
            equipCategory: { 
                type: Array,
                default: () => []
            }
        },
        watch: { 
            paramsGroup: { 
                handler (val) { 
                    if (!lodash.isEmpty(val)) { 
                        this.$nextTick(() => { 
                            this.getChartData();
                        })
                    }
                },
                deep: true
            },
            equipCategory: { 
                handler (val) { 
                    if (!lodash.isEmpty(val)) { 
                        this.equipType = val[0].dictid; // 设置默认值，第一个默认选中
                    }
                },
                immediate: true,
                deep: true
            }
        },
        data () { 
            return { 
                equipType: '', // 设备类别
                extraOption: { 
                    legend: { 
                        show: false
                    },
                    grid: { 
                        top: '10%',
                        bottom: '5%',
                    },
                    tooltip: { 
                        confine: true, // 将图表限制在区域内
                        formatter: function (params) {  // 提示内容太多隔行显示内容
                            let str = `${ params[0].axisValue}</br>`;
                            params.forEach((item, index) => { 
                                str += `${ params[index].marker} ${ params[index].seriesName} : ${ params[index].value}只</br>`
                            })
                            return str
                        },
                    },
                    dataZoom: [{ 
                        type: 'slider',
                        show: true,
                        zoomLock: true,
                        xAxisIndex: [0],
                        maxValueSpan: 6,
                        left: '6%',
                        bottom: 0,
                        start: 10,
                        end: 90, //初始化滚动条
                        width: '88%',
                        height: 10,
                        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        handleSize: '110%',
                        handleStyle: { 
                            color: "#d3dee5",
                        },
                        borderColor: "#90979c"
                    },
                    { 
                        type: 'inside',
                        id: 'insideX',
                        xAxisIndex: [0],
                        start: 10,
                        end: 90,
                        zoomOnMouseWheel: false,
                        moveOnMouseMove: true,
                        moveOnMouseWheel: true
                    }],
                    xAxis: [
                         { 
                            type: 'category',
                            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            data: [],
                            axisLabel: { 
                                show: true,
                                interval: 0, //代表显示所有x轴标签显示
                                color: '#666',
                            },
                        }
                    ],
                    yAxis: { 
                        name: '单位：只',
                        nameTextStyle: { 
                            color: '#666'
                        }
                    },
                    series: [
                        // { 
                            // name: '市辖区',
                            // type: 'line',
                            // smooth: true,
                            // data: [13, 1, 4, 44, 45, 322, 76, 23, 11, 23, 11, 222]
                        // }
                    ],
                }
            }
        },
        methods: { 
            getChartData () {  // 获取图表数据
                const params = { 
                    orgNo: this.paramsGroup.deptCode,
                    equipCateg: this.equipType,
                    statisDateStart: dateFormat(this.paramsGroup.statisDateStart, "yyyy-mm"),
                    statisDateEnd: dateFormat(this.paramsGroup.statisDateEnd, "yyyy-mm"),
                }
                getTrendAnalysis(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.xAxis[0].data = chartsData.xAxis.length > 0 && chartsData.xAxis[0].data;
                        const arr = [];
                        chartsData.seriesData && chartsData.seriesData.forEach((item) => { 
                            arr.push({ 
                                type: 'line',
                                name: item.name,
                                smooth: true,
                                data: item.data
                            })
                        })
                        this.extraOption.series = arr;
                    }
                })
            },
            handleChangeEquipCategory () {  // 监听设备类别改变
                this.getChartData();
            },
        }
    }
    </script>
    
    <style lang="less" scoped>
        .query_criteria { 
            width: 100%;
            height: 30px;
            font-size: 12px;
    
            .ivu-row { 
                .ivu-col { 
                    float: left;
                    margin: 5px 0px 5px 5px;
                }
            }
    
            /deep/ .ivu-select { 
                width: 89px !important;
    
                .ivu-select-selection { 
                    height: 24px;
    
                    .ivu-select-placeholder { 
                        font-size: 12px;
                        line-height: 24px;
                    }
                }
    
                .ivu-select-selected-value { 
                    line-height: 23px !important;
                }
            }
    
        }
    </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/2c36e6da1bd940d58440bf34bf3c27a0.png