在很多后臺管理系統(tǒng)中,echarts應(yīng)該是屬于比較常用組件,一個項目中,可能會有多個圖表還會考慮到屏幕適配,在此,對echarts進行簡單的封裝

介紹:引入封裝的echarts組件,然后在請求數(shù)據(jù)時,傳入需要展示的數(shù)據(jù),在此對數(shù)據(jù)做了監(jiān)聽,實現(xiàn)實時渲染,然后傳入echarts的配置項即可.

//視圖層
<template>
    <div class="shadow w100 h100" v-bind:id="id" :class="className" :style="{height:height,width:width}"></div>
</template>

動態(tài)綁定id,id為父組件傳過來

//數(shù)據(jù)和邏輯處理
  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 ) {
                //防止改變原數(shù)據(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 ();
            }
        }
    };

支持傳入類名,設(shè)置圖表的寬高,id為echarts的id,data為要渲染的數(shù)據(jù)

注意:

1.在watch里監(jiān)聽傳入的data,改變的時候重新設(shè)置數(shù)據(jù),實現(xiàn)數(shù)據(jù)的實時更新

2.初始化圖表的時候監(jiān)聽屏幕的變化,重新初始化圖表,保證不同分辨率下,圖表支持適配,組件銷毀的時候,移除監(jiān)聽

//樣式
<style scope>
.h100 {
  height: 99.7%;
}

.w100 {
  width: 99.7%;
}
.echarsCSS {
    width: 99.7%;
    height: 27.77777vh;
}
.shadow {
    /* 陰影 */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.3);
}
</style>

使用方式

1.先引入組件

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

2.頁面渲染

<ECharts
   id="weekIntent"
   :data="require('@/echartsdata/LinePostChart')('周意向數(shù)',weekTime,weekIntent)"
     @clickECharts="clickEChartsIntent"
 ></ECharts>

引入的配置文件 LinePostChart 傳入 標(biāo)題和需要顯示的數(shù)據(jù)

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: {
            //鼠標(biāo)懸浮彈框組件
            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

圖表大小可以適配屏幕響應(yīng)式改變

注:

具體demo請參考http://47.94.89.73:8080/zeefile/project/management-js/#/login
源碼:https://github.com/wxyfc/management-system
如有疑問,請下方留言,謝謝!