折线图组件封装及数据处理

最新推荐文章于 2024-08-30 18:21:33 发布

木易66丶

最新推荐文章于 2024-08-30 18:21:33 发布

阅读量262

点赞数

分类专栏：前端js vue

本文链接：https://blog.csdn.net/q_qman/article/details/117225870

版权

前端js 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

24 篇文章 1 订阅

订阅专栏

该博客介绍了如何使用ECharts库封装一个折线图组件，包括设置图表样式、配置项如颜色、图例、提示框、坐标轴等，并处理数据源以适应不同数量的数据系列。同时，提供了处理数据的方法`processData`，用于计算总和并填充缺失值。文章还展示了组件的实际显示效果。

摘要由CSDN通过智能技术生成


//折线图组件封装及数据处理
<template>
    <div class="pancelDiv" :id="id" :style="{ height: height, width: width }"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
    props: {
        id: {
            type: String,
            default: 'barGraph',
        },
        width: {
            type: String,
            default: '200px',
        },
        height: {
            type: String,
            default: '140px',
        },
        options: {
            type: Array,
            default: () => {},
        },
    },
    data() {
        return {
            defaultOptions: {
                color: ['#0C51A1', '#4182E5', '#3D47FF', '#21FFC7'],
                legend: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                        width: '30',
                        height: '30',
                    },
                    selector: false,
                    selected: {
                        // 城管: false,
                        // 调处: false,
                    },
                    itemGap: 22,
                    itemWidth: 12,
                    itemHeight: 12,
                    icon: 'rect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none,
                },
                tooltip: {
                    trigger: 'axis',
                    showContent: true,
                    // confine: true, //将悬浮框限制在图表区域内
                    appendToBody: true, //将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点
                },
                dataset: {
                    source: [
                        ['month', '1月', '2月', '3月', '4月', '5月', '6月'],
                        ['安监', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                        ['查违', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                        ['城管', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                        // ['调处', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
                    ],
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        //坐标线
                        lineStyle: {
                            type: 'solid',
                            color: '#d8d8d8', //轴线的颜色
                            width: '1', //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#878787', //坐标值的具体的颜色
                        },
                        interval: 1,
                    },
                    boundaryGap: false,
                    nameGap: 15,
                    // data:[ '1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value',
                    gridIndex: 0,
                    axisLabel: {
                        textStyle: {
                            color: '#878787', //坐标值具体的颜色
                        },
                    },
                    axisLine: {
                        //线
                        show: false,
                    },
                    axisTick: {
                        //刻度
                        show: false,
                    },
                    // minInterval: 15,//标值的最小间隔
                    splitLine: {
                        //坐标轴风格
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#5B6A87',
                        },
                    },
                },
                grid: {
                    top: 50,
                    right: 5,
                    bottom: 5,
                    borderWidth: 0,
                    containLabel: true,
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' },
                        areaStyle: { opacity: 0.3 },
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' },
                        areaStyle: { opacity: 0.3 },
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' },
                        areaStyle: { opacity: 0.3 },
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' },
                        areaStyle: { opacity: 0.3 },
                    },
                ],
            },
            // dataSeq: ['安监', '查违', '城管', '调处', '公安', '人力资源', '其他','其他类','市监','文化广电旅游体育','消防安全','生态环境与水务','三小场所','交通','非警务警情'],
        }
    },
    watch: {
        options: {
            immediate: true,
            handler: function(newValue, oldValue) {
                this.$nextTick(() => {
                    if (newValue && newValue.length > 0) {
                        this.defaultOptions.dataset.source = this.processData(newValue)
                        // 解决分类低于4个时数据显示bug start
                        let sourceLength = Object.keys(this.defaultOptions.dataset.source).length
                        if (sourceLength < 5) {
                            this.defaultOptions.series = this.defaultOptions.series.splice(0, sourceLength - 1)
                        } else {
                            this.defaultOptions.series = [
                                {
                                    type: 'line',
                                    smooth: true,
                                    seriesLayoutBy: 'row',
                                    emphasis: { focus: 'series' },
                                    areaStyle: { opacity: 0.3 },
                                },
                                {
                                    type: 'line',
                                    smooth: true,
                                    seriesLayoutBy: 'row',
                                    emphasis: { focus: 'series' },
                                    areaStyle: { opacity: 0.3 },
                                },
                                {
                                    type: 'line',
                                    smooth: true,
                                    seriesLayoutBy: 'row',
                                    emphasis: { focus: 'series' },
                                    areaStyle: { opacity: 0.3 },
                                },
                                {
                                    type: 'line',
                                    smooth: true,
                                    seriesLayoutBy: 'row',
                                    emphasis: { focus: 'series' },
                                    areaStyle: { opacity: 0.3 },
                                },
                            ]
                        }
                        // end
                        echarts.init(document.getElementById(this.id)).setOption(this.defaultOptions, true)
                    } else {
                        this.defaultOptions.dataset.source = []
                        this.$emit('countTotal', 0)
                        echarts.init(document.getElementById(this.id)).setOption(this.defaultOptions, true)
                    }
                })
            },
        },
    },
    methods: {
        processData(params) {
            var days = this.getLastSixMon()
            let loopData = { day: days }
            let countTotal = 0
            let dataSeq = []
            for (let i = 0, len = params.length; i < len; i++) {
                let { kind, month, total } = params[i]
                countTotal += total
                dataSeq.push(kind)
                let data = loopData[kind]
                if (!data) {
                    data = {}
                    loopData[kind] = data
                }
                data[month] = total
            }
            this.$emit('countTotal', countTotal)
            dataSeq = [...new Set(dataSeq)]
            for (let i = 0, len = dataSeq.length; i < len; i++) {
                let kind = dataSeq[i]
                let data = loopData[kind]
                if (!data) {
                    data = {}
                    loopData[kind] = data
                }
                let totalOfMonth = []
                for (let j = 0, l = days.length; j < l; j++) {
                    let month = days[j]
                    if (data[month]) {
                        totalOfMonth.push(data[month])
                    } else {
                        totalOfMonth.push(0)
                    }
                }
                loopData[kind] = totalOfMonth
            }
            return loopData
        },
        // 获取最近六个月
        getLastSixMon() {
            var data = new Date()
            //获取年
            var year = data.getFullYear()
            //获取月
            var mon = data.getMonth() + 1
            var arry = new Array()
            for (var i = 0; i < 6; i++) {
                if (mon <= 0) {
                    year = year - 1
                    mon = mon + 12
                }
                if (mon < 10) {
                    mon = '0' + mon
                }
                arry[i] = year + '' + mon
                mon = mon - 1
            }
            return arry
        },
    },
}
</script>
<style lang="scss" scoped>
.pancelDiv {
    margin: 0 auto !important;
}
</style>

效果如下：