基于vue的后台管理系统适配echarts图表

在很多后台管理系统中,echarts应该是属于比较常用组件,一个项目中,可能会有多个图表还会考虑到屏幕适配,在此,对echarts进行简单的封装

介绍:引入封装的echarts组件,然后在请求数据时,传入需要展示的数据,在此对数据做了监听,实现实时渲染,然后传入echarts的配置项即可.

//视图层

动态绑定id,id为父组件传过来

//数据和逻辑处理
  export default {
        mixins : [] ,
        name : "ECharts" ,
        components : {} ,
        data () {
            return {
                MyChart : null
            };
        } ,
        props : {
            className : {
                type : String ,
                default : "echarsCSS"
            } ,
            id : {
                type : String ,
                required : true
            } ,
            data : {
                type : Object ,
                default : null
            } ,
            width : {
                type : String ,
                default : "99.9%"
            } ,
            height : {
                type : String ,
                default : "99.9%"
            }
        } ,
        computed : {} ,
        methods : {
            $avoid = function ( j ) {
                //防止改变原数据
                return JSON.parse ( JSON.stringify ( j ) );
            },
            async initChart () {
                let _this = this;
                _this.MyChart = await require ( "echarts" ).init (
                    document.getElementById ( _this.id ) ,
                    "light"
                );
                await _this.MyChart.on ( "click" , _this.click );
                await window.addEventListener ( "resize" , _this.__resizeHandler );
                await _this.setChart ();
            } ,
            click ( p ) {
                let _this = this;
                let d = this.$avoid ( p.data );
                _this.$emit ( "clickECharts" , Object.assign ( {} , null , d ) );
            } ,
            clear () {
                this.MyChart.clear ();
            } ,
            async setChart () {
                let _this = this;
                await _this.clear ();
                await _this.MyChart.setOption ( _this.data , true );
            } ,
            __resizeHandler () {
                if ( this.MyChart ) {
                    this.$nextTick ( () => {
                        this.MyChart.resize ();
                        this.setChart ();
                    } )
                }
            }
        } ,
        watch : {
            data : {
                handler ( n , o ) {
                    if ( JSON.stringify ( n ) !== JSON.stringify ( o ) ) this.setChart ();
                } ,
                deep : true
            }
        } ,
        mounted () {
            this.initChart ();
        } ,
        beforeDestroy () {
            window.removeEventListener ( "resize" , this.__resizeHandler );
            if ( !this.MyChart ) {
                return;
            }
            this.MyChart.dispose ();
            this.MyChart = null;
        } ,
        activated () {
            let that = this;
            if ( that.MyChart ) {
                that.__resizeHandler ();
            }
        }
    };

支持传入类名,设置图表的宽高,id为echarts的id,data为要渲染的数据

注意:

1.在watch里监听传入的data,改变的时候重新设置数据,实现数据的实时更新

2.初始化图表的时候监听屏幕的变化,重新初始化图表,保证不同分辨率下,图表支持适配,组件销毁的时候,移除监听

//样式

使用方式

1.先引入组件

  components: {
    ECharts: () => import("@/assets/ECharts")
  },

2.页面渲染

引入的配置文件 LinePostChart 传入 标题和需要显示的数据

module.exports = function (title, dataAxis, data) {
    // var data = [ 122, 133, 334, 198, 123, 125, 220];
    // var yMax = 500;
    // var dataShadow = [];

    // for (var i = 0; i < data.length; i++) {
    //     dataShadow.push(yMax);
    // }
    let option = {
        title: {
            text: title,
            left: '5%',
            top: '2%',
            textStyle: {
                fontSize: 18
            }
        },
        tooltip: {
            //鼠标悬浮弹框组件
            trigger: 'axis'
        },
        grid: {
            //配置视图的位置 左右默认10%
            bottom: '10%',
            top: '20%',
            left:'5%',
            right: '5%',
            containLabel: true
        },
        xAxis: {
            data: dataAxis,
            z: 10
        },
        yAxis: {
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: { color: 'rgba(0,0,0,0.02)' }
                },
                barGap: '-100%',
                barCategoryGap: '60%',

            },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                },
                data: data
            }
        ]
    };

    return option
}

效果图

image.png

图表大小可以适配屏幕响应式改变

注:

具体demo请参考http://47.94.89.73:8080/zeefile/project/management-js/#/login
源码:https://github.com/wxyfc/management-system
如有疑问,请下方留言,谢谢!