The top feature is implemented using Vue2-highcharts in Vue _vue2-highcharts

1, to achieve the effect of the following figure:

2, the first project reference Vue2-highcharts
The Package.json is as follows:

On the command line, enter:

CNPM Install Vue2-highcharts

3, the page code is as follows:

<template> <div > <div> <div id= "Transparent-header" class= "Rank-head container"
              ;  <span > Energy ranking </span> </div> </div> <div > <div > <datepicker v-on:pic Ked= "Picked" style= "margin-left:10px;" ></datepicker> </div> <div > </div> </d iv> <div > <div class= "Charts" > <vue-highcharts:options= "Options

           "Ref=" Maxlinecharts "></vue-highcharts> </div> </div> <div > <div class= "Charts" > <vue-highcharts:options= "Options" ref= "Minlinecharts" ></vue-hi ghcharts> </div> </div> </div>;/template> <script> import DatePicker from '. 
           /components/datepicker.vue ' Import vuehighcharts from ' vue2-highcharts ' export default {data () {return{ topheight:240, Freezemon: ", Ownerfreedata: [], options:{Credi
              TS: {Enabled:false}, Legend: {Enabled:false Global: {Useutc:false}, chart: {Typ 
                 E: ' Bar '}, Title: {text: '}, subtitle: { Text: '}, xaxis:[{categories: [' 1 ', ' 2 ', ' 3 ', ' 4 ',
                ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' Ten ', title: {Text:null},
              Labels: {rotation:-45}   }], yaxis:[{min:0, labels:{ Overflow: ' Justify '}, Title: {text: ' Unit (kw
                     h) ', align: ' high '}], tooltip: {
                    Formatter:function () {return this.x+ ': ' +this.y+ ' kwh '; }, credits: {Enabled:false}, plotoptions
                        : {bar: {datalabels: {enabled:true

               }, Series: [{type: ' Bar '}]
                }}}, Methods: {Picked (year, month, date) {if (Month < 10) { This.freezemon= ' ${year}-0${month} ';
            }else{This.freezemon = ' ${year}-${month} ';
        } this.getlist ();
        }, Routerback () {this. $router. Go (-1);
            }, GetList () {Let maxlinecharts = this. $refs. Maxlinecharts;

            Let Minlinecharts = this. $refs. Minlinecharts; if (maxlinecharts!= null && minlinecharts!= null) {//Remove all series Maxlinecharts.rem
                Oveseries ();

Minlinecharts.removeseries ();
                Set the title name Maxlinecharts.getchart (). Title.update ({text: ' Max TOP10 '});

                Minlinecharts.getchart (). Title.update ({text: ' Use energy min TOP10 '});
                var usertype = Sessionstorage.getitem (' usertype ');

                var AreaCode = Sessionstorage.getitem (' AreaCode '); this. $http. Post (this. Urlinfo + '/mobile/rankingmonitor/getdayfreezeapp.do ', {yearmonth:this.freezemon,usertype:usertype,areacode:
    AreaCode})            . Then (function (res) {var seriesdata = [] Var categoriesdata = [] for (var i = 0;i < Res.data.max.length; i++) {//maxlinecharts
                             . addseries ({name:res.data.max[i][1],data: [{name:res.data.max[i][1],y:res.data.max[i][2]}});
                             Seriesdata.push ([res.data.max[i][1],res.data.max[i][2]]);
                        Categoriesdata.push (res.data.max[i][1]);
                        } maxlinecharts.addseries ({name: ' With energy ', data:seriesdata});

                        Maxlinecharts.getchart (). Xaxis[0].setcategories (Categoriesdata); Seriesdata = [] Categoriesdata = [] for (var i = 0;i < Res.data.min.leng Th i++) {//minlinecharts.addseries ({name:res.data.min[i][1],data: [{name:res.data.min[i][1],y:
            RES.DATA.MIN[I][2]});                 Seriesdata.push ([res.data.min[i][1],res.data.min[i][2]]);
                        Categoriesdata.push (res.data.min[i][1]);
                        } minlinecharts.addseries ({name: ' With energy ', data:seriesdata});

                Minlinecharts.getchart (). Xaxis[0].setcategories (Categoriesdata);
                ). catch (function (error) {this. $toast (' Query ranking information exception ');

            }); }}, components: {datepicker, vuehighcharts}, mounted () {th  Is.getlist ()} </script> <style> *{margin:0;padding:0;

List-style:none} h1,h2,h3,h4,h5,h6{font-size:16px; font-weight:normal;}
     . rank-head{width:100%;
     height:40px;
     position:fixed;
     Background:-webkit-linear-gradient (Top,rgba (0,0,0,.6), Rgba (0,0,0,0));
     z-index:999;
     Color: #fff;
     font-size:16px;
     Text-align:center; Line-height:40px;
     }. container{width:100%;
     Overflow:hidden}. rank-head-back{Display:block;
     Float:left;
     width:40px;
     height:40px; Background:url ("..
     /assets/index/back.png ") No-repeat Center Center;
background-size:100% 100%;
 } </style>