純前端js+echarts+xlsx.js 實現數據可視化

客戶所要求的功能點實現了.個人感覺代碼比較low,環環相扣,大家有啥意見建議歡迎評論區,虛心受教

思路: mousedown獲取分表名稱,通過url 獲取所需表格對象workbook,分析圖表所需數據,數據根據需求分類到不通數組,數組傳參至echarts,生成圖表!

<script type="text/javascript">
        $(document).ready(function(){
            dourlExcel('http://127.0.0.1/202005.xlsx','規模以上工業增加值');
        })
        var url = 'http://127.0.0.1/202005.xlsx';
        function getexname(){
           $('.ccr li').mousedown(
            function(e){ 
                 var exname = $(e.target).text();
                 dourlExcel(url,exname);

                })
           };
        function dourlExcel(url,exname){
            var xhr = new XMLHttpRequest();
            xhr.open('get',url,true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function(){
                if (xhr.status = 200){
                    var data = new Uint8Array(xhr.response);
                    var workbook = XLSX.read(data,{type:'array'});   //
                    //if(callback) callback (workbook);
                    readexcel(workbook,exname);
                }else{
                    readexcel(workbook,'規模以上工業增加值');
                }
            };
            xhr.send();
        }
        function readexcel(workbook,exname){
            var sheetNames = workbook.SheetNames;        //表名
            var fourname = ['地區生產總值','社會消費品零售總額','城鎮居民人均可支配收入','農村居民人均可支配收入']
            var fivename = ['固定資產投資','限額以上消費品零售額','進出口總額','一般公共預算收入','規模以上工業增加值']
            var fourdalist = ['B1','B2','B3','B4','B5','B6',
                          'C1','C2','C3','C4','C5','C6',
                          'D1','D2','D3','D4','D5','D6'];
            var fivedalist = ['B1','B2','B3','B4','B5','B6','B7','B8','B9','B10','B11','B12','B13','B14','B15',
                          'C1','C2','C3','C4','C5','C6','C7','C8','C9','C10','C11','C12','C13','C14','C15',
                          'D1','D2','D3','D4','D5','D6','D7','D8','D9','D10','D11','D12','D13','D14','D15'];
            if ( fourname.includes(exname)) {
                    fendata(fourdalist);
                } else {
                    fendata(fivedalist);
                }                             

            function fendata(dalist){
                var xdata = []
                var yleftdata = []
                var yrightdata = []
                var titledata = []
                for (var value of dalist) {
                    if (value[0] === 'B'){
                    xdata.push(workbook.Sheets[exname][value].v);}
                    else if(value[0] === 'C' && value.slice(1,3) > 1){
                        yleftdata.push(workbook.Sheets[exname][value].v);}
                    else if(value[0] === 'D' && value.slice(1,3) > 1) {
                        yrightdata.push(workbook.Sheets[exname][value].v);}
                    else {
                        titledata.push(workbook.Sheets[exname][value].v);
                    } }
                fourecdata(xdata,yleftdata,yrightdata,titledata,exname);        
            }    
        }

// ****************************************************************************



    </script>

<style type="text/css">
        .ccr ul{width: 420px;}
        .ccr li{width: 200px;height: 50px;background: #f5f8fd;color: #003399;border: 1px solid #7e8fab;float: left;list-style: none;margin-left: 5px;
            margin-top: 10px;text-align: center;line-height: 50px;cursor: pointer;}
        .ccr li:hover{background: #003399;color:#fff;}
    </style>
    <div style="width:1200px">
        <div class="ccr" style="float: left;">
            <ul>
                <li onmousedown="getexname();" id='地區生產總值'>地區生產總值</li>
                <li onmousedown="getexname();" id='規模以上工業增加值'>規模以上工業增加值</li>
                <li onmousedown="getexname();" id='固定資產投資'>固定資產投資</li>
                <li onmousedown="getexname();" id='社會消費品零售總額'>社會消費品零售總額</li>
                <li onmousedown="getexname();" id='限額以上消費品零售額'>限額以上消費品零售額</li>
                <li onmousedown="getexname();" id='進出口總額'>進出口總額</li>
                <li onmousedown="getexname();" id='一般公共預算收入'>一般公共預算收入</li>
                <li onmousedown="getexname();" id='城鎮居民人均可支配收入'>城鎮居民人均可支配收入</li>
                <li onmousedown="getexname();" id='農村居民人均可支配收入'>農村居民人均可支配收入</li>
                <li onmousedown="getexname();" id='zjjc'><a href="555">測試變化A標簽href</a></li>
                <!-- <li onmouseenter="getexname();" id='社會消費品零售總額'>社會消費品零售總額</li> -->
            </ul>    
        </div>
        <div id="mainex" style="width: 700px;height: 500px;float: left;">
        </div>
        <div id="main2" style="width: 700px;height: 500px;float: left;"></div>
        <!-- <div style="clear: both;"></div> -->
    </div>

    <script type="text/javascript">
        function fourecdata(xdata,yleftdata,yrightdata,titledata,exname){
            var mychart=echarts.init(document.getElementById("mainex"));
            var option={
                title:{
                    text: exname,
                    x: "center"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type:'cross'
                    }
                },
                legend:{
                    type:'scroll',
                    orient:'horizontal',            //圖例水平展示
                    bottom:0
                },
                xAxis:{
                    type:'category',
                    data:xdata.slice(1),
                    axisLabel:{interval:0,
                               rotate:20 }
                },
                yAxis:[
                    {    
                        type:'value',
                        name:xdata[0].slice(2)
                    },
                    {
                        type:'value',
                        name:'%',
                        min:-45,
                        max:50,
                        interval:5,
                        axisLabel: {
                        formatter: '{value} %'
                        }
                    }

                ],

                series:[
                    {data: yrightdata, type:'line', name:titledata[1],yAxisIndex:1},
                    {data: yleftdata, type:'bar', name:titledata[0]},
                    ]
            };
            mychart.setOption(option);
        }
    </script>