封装echarts所用

shuishen

2022-10-31 a9e1b16aeeda9f15f879e1b8bebdb1e58081bde1

封装echarts所用

 package-lock.json

Diff too large

 package.json

@@ -13,6 +13,7 @@
        "axios": "^0.22.0",
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "element-resize-detector": "^1.2.4",
        "element-ui": "^2.15.6",
        "font-awesome": "^4.7.0",
        "qs.js": "^0.1.12",

 src/components/echarts/BarCharts.vue

New file
@@ -0,0 +1,118 @@
<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>
  
<script>
import chartResize from './mixins/chart-resize'

export default {
    mixins: [chartResize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        // 父组件传递过来的图表数据
        chartData: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            // Echarts实例
            chart: null
        }
    },
    watch: {
        /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
        chartData: {
            deep: true,
            handler (val) {
                this.setOptions(val)
            }
        }
    },
    mounted () {
        /* 图表初始化 */
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy () {
        if (!this.chart) {
            return
        }
        /* 释放图表实例 */
        this.chart.dispose()
        /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
        this.chart = null
    },
    methods: {
        initChart () {
            this.chart = this.$echarts.init(this.$el)
            this.setOptions(this.chartData)
        },
        setOptions ({ days, data1, data2 } = {}) {
            this.chart.setOption({
                title: {
                    text: '堆叠柱状图',
                    textStyle: {
                        fontSize: 15
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: 35,
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: days,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: '数量一',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: data1,
                    animationDuration: 2000
                },
                {
                    name: '数量二',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: data2,
                    animationDuration: 2000
                }]
            })
        }
    }
}
</script>

 src/components/echarts/mixins/chart-resize.js

New file
@@ -0,0 +1,42 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-31 11:02:28
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-31 11:02:55
 * @FilePath: \srs-police-affairs\src\components\echarts\mixins\chart-resize.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

// 是一个监听元素大小改变的插件，除了窗口的大小改变会引起变形之外，echart实例的父元素大小改变也会使其变形，所以我们还要对其父元素大小改变进行监听，做到完全的自适应。
import ResizeListener from 'element-resize-detector'

export default {
    methods: {
        /* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
        chartEleResizeListener () {
            const chartInstance = ResizeListener({
                strategy: 'scroll',
                callOnAdd: true
            })
            chartInstance.listenTo(this.$el, () => {
                if (!this.chart) return
                this.chart.resize()
            })
        },

        /* 当窗口缩放时，echart动态调整自身大小 */
        windowResizeListener () {
            if (!this.chart) return
            this.chart.resize()
        }
    },
    mounted () {
        window.addEventListener('resize', this.windowResizeListener)
        this.chartEleResizeListener()
    },
    beforeDestroy () {
        window.removeEventListener('resize', this.windowResizeListener)
    }
}