基于echarts对折线图的封装

核心库

• echarts
• lodash
• ResizeListener

代码

<!--
 * @Author: your name
 * @Date: 2020-11-04 14:56:52
 * @LastEditTime: 2020-11-19 15:14:00
-->
<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>

使用

<!--
 * @Author: your name
 * @Date: 2020-11-16 09:09:30
 * @LastEditTime: 2020-11-26 15:54:37
 * @LastEditors: Please set LastEditors
 * @Description: 累计拆回表趋势分析
-->
<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>

效果图