ECharts + Jquery 作大屏展現

時間 2019-11-21

原文原文鏈接

HTMLjavascript

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>echarts</title>
    <link rel="stylesheet" type="text/css" href="api.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
    <form id="form" runat="server">
        <input type="hidden" id="start" name="start" value="0" />
        <input type="button" id="btnSet" class="btnPause" title="點擊中止" />
        <div class="title"><b>大屏信息展現</b></div>
        <div id="dataContainer" class="dataContainer"></div>
        <div id="pieContainer" class="pieContainer"></div>
        <div id="mapContainer" class="mapContainer"></div>
        <div id="barContainer" class="barContainer"></div>
    </form>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="index.js"></script>

</html>

data.jscss

/************************************map**************************************/
var data = [{
    name: '海門',
    value: 40
}, {
    name: '鄂爾多斯',
    value: 12
}, {
    name: '招遠',
    value: 62
}, {
    name: '舟山',
    value: 82
}, {
    name: '齊齊哈爾',
    value: 14
}, {
    name: '鹽城',
    value: 125
}, {
    name: '赤峯',
    value: 126
}, {
    name: '青島',
    value: 91
}, {
    name: '乳山',
    value: 118
}, {
    name: '金昌',
    value: 119
}, {
    name: '泉州',
    value: 121
}, {
    name: '萊西',
    value: 21
}, {
    name: '日照',
    value: 21
}, {
    name: '膠南',
    value: 55
}, {
    name: '南通',
    value: 60
}, {
    name: '拉薩',
    value: 84
}, {
    name: '雲浮',
    value: 44
}, {
    name: '梅州',
    value: 125
}, {
    name: '文登',
    value: 95
}, {
    name: '上海',
    value: 125
}, {
    name: '攀枝花',
    value: 95
}, {
    name: '威海',
    value: 65
}, {
    name: '承德',
    value: 75
}, {
    name: '廈門',
    value: 46
}, {
    name: '汕尾',
    value: 66
}, {
    name: '克拉瑪依',
    value: 72
}, {
    name: '大慶',
    value: 279
}];
//城市設置[經度，緯度]
var geoCoordMap = {
    '海門': [121.15, 31.89],
    '鄂爾多斯': [109.781327, 39.608266],
    '招遠': [120.38, 37.35],
    '舟山': [122.207216, 29.985295],
    '齊齊哈爾': [123.97, 47.33],
    '鹽城': [120.13, 33.38],
    '赤峯': [118.87, 42.28],
    '青島': [120.33, 36.07],
    '乳山': [121.52, 36.89],
    '金昌': [102.188043, 38.520089],
    '泉州': [118.58, 24.93],
    '萊西': [120.53, 36.86],
    '日照': [119.46, 35.42],
    '膠南': [119.97, 35.88],
    '南通': [121.05, 32.08],
    '拉薩': [91.11, 29.97],
    '雲浮': [112.02, 22.93],
    '梅州': [116.1, 24.55],
    '文登': [122.05, 37.2],
    '上海': [121.48, 31.22],
    '攀枝花': [101.718637, 26.582347],
    '威海': [122.1, 37.5],
    '承德': [117.93, 40.97],
    '廈門': [118.1, 24.46],
    '汕尾': [115.375279, 22.786211],
    '克拉瑪依': [84.77, 45.59],
    '大慶': [125.03, 46.58]
};

//浮層內容的設置（）
var $imgs = [{
    area: '海門',
    txt: '哈哈哈'
}, {
    area: '鄂爾多斯',
    txt: '哈哈哈'
}, {
    area: '招遠',
    txt: '哈哈哈'
}, {
    area: '舟山',
    txt: '哈哈哈'
}, {
    area: '齊齊哈爾',
    txt: '哈哈哈'
}, {
    area: '鹽城',
    txt: '哈哈哈'
}, {
    area: '赤峯',
    txt: '哈哈哈'
}, {
    area: '青島',
    txt: '哈哈哈'
}, {
    area: '乳山',
    txt: '哈哈哈'
}, {
    area: '金昌',
    txt: '哈哈哈'
}, {
    area: '泉州',
    txt: '哈哈哈'
}, {
    area: ' 萊西',
    txt: '哈哈哈'
}, {
    area: '日照',
    txt: '哈哈哈'
}, {
    area: '膠南',
    txt: '哈哈哈'
}, {
    area: '南通',
    txt: '哈哈哈'
}, {
    area: '拉薩',
    txt: '哈哈哈'
}, {
    area: '雲浮',
    txt: '哈哈哈'
}, {
    area: '梅州',
    txt: '哈哈哈'
}, {
    area: '文登',
    txt: '哈哈哈'
}, {
    area: '上海',
    txt: '哈哈哈'
}, {
    area: '攀枝花',
    txt: '哈哈哈'
}, {
    area: '威海',
    txt: '哈哈哈'
}, {
    area: '承德',
    txt: '哈哈哈'
}, {
    area: '廈門',
    txt: '哈哈哈'
}, {
    area: '汕尾',
    txt: '哈哈哈'
}, {
    area: '克拉瑪依',
    txt: '哈哈哈'
}, {
    area: '大慶',
    txt: '哈哈哈'
}];
//數據轉換函數
var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
/************************************map**************************************/






/************************************pie**************************************/
var pieData = [{
    value: 4698,
    name: '個體司機'
}, {
    value: 808,
    name: '個體貨主'
}, {
    value: 404,
    name: '公司貨主'
}, {
    value: 193,
    name: '公司車隊/專線'
}, {
    value: 278,
    name: '物流公司/園區'
}];
var pieColumn = ['個體司機', '個體貨主', '公司貨主', '公司車隊/專線', '物流公司/園區'];
/************************************pie**************************************/




/************************************bar**************************************/
var barDate = ['2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09'];
var barColumn = ['車輛數', '用戶數', '訂單數'];
var barData = [
    {
        name: '車輛數',
        type: 'bar',
        label:{
          show:true
        },
        data: [537, 763, 992, 1121, 1298, 1332]
    }, {
        name: '用戶數',
        type: 'bar',
        label:{
          show:true
        },
        data: [998, 1481, 2678, 4389, 6461, 6640],
        markLine: {
            label:{
              show : false
            },
            lineStyle: {
                // normal: {
                //     type: 'dashed'
                // },
                color:'#ccc'
            },
            data: [
                [{
                    type: 'min'
                }, {
                    type: 'max'
                }]
            ]
        }
    }, {
        name: '訂單數',
        type: 'bar',
        label:{
          show:true
        },
        data: [3847, 10126, 11922, 12099, 12335, 12341]
    }
];
/************************************bar**************************************/





/************************************data**************************************/
var datadata = [12341,875,1332];
/************************************data**************************************/

options.jshtml

var myOptions = [{
    backgroundColor: '#020933',
    title: {
        top: 20,
        // left: 190,
        text: '', //標題
        subtext: '',
        sublink: '#', //subtext跳轉地址
        left: 'center',
        // x: 'left',
        textStyle: {
            color: '#ccc'
        }
    },
    //浮層設置
    tooltip: {
        trigger: 'item',
        formatter: function(params, ticket, callback) {
            var $pna = params.name;
            var res = "";

            for (var i = 0; i < $imgs.length; i++) {
                if ($imgs[i].area == $pna) {
                    res = '<p>' + $imgs[i].txt + '</p>'; //設置自定義數據的模板，這裏的模板是文字
                    //console.log(res);
                    break;
                }
            }

            setTimeout(function() {
                // 僅爲了模擬異步回調
                callback(ticket, res); //回調函數，這裏能夠作異步請求加載的一些代碼
            }, 15)
            return "loading";
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['Top 3', 'All'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: 'transparent',
                borderColor: '#3fdaff',
                borderWidth: 2,
                shadowColor: 'rgba(63, 218, 255, 0.5)',
                shadowBlur: 30
            },
            emphasis: {
                areaColor: '#2B91B7',
            }
        }
    },
    //調整顯示級別  位置大小
    layoutCenter: ['50%', '50%'],
    layoutSize: 700,

    series: [{
        name: 'All',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ddb926'
            }
        }
    }, {
        name: 'Top 3',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 3)),
        symbolSize: function(val) {
            return val[2] / 10;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }]
}, {
    backgroundColor: '#020933',
    title: {
        top: 20,
        text: '用戶分佈',
        subtext: '',
        x: 'center',
        textStyle: {
            color: '#ccc'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: 'right',
        top: 40,
        data: pieColumn,
        textStyle:{
          color:'#ccc'
        }
    },
    series: [{
        name: '用戶類型',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        data: pieData,
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
},{
    backgroundColor: '#020933',
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
        }
    },
    legend: {
        data:barColumn,
        textStyle:{
          color:'#ccc'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : barDate,
            axisLine :{
              lineStyle:{
                color:'#ccc'
              }
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLine :{
              lineStyle:{
                color:'#ccc'
              }
            }
        }
    ],
    series : barData
}];

View Code

index.jsjava

var mapContainer = document.getElementById('mapContainer');
var pieContainer = document.getElementById('pieContainer');
var barContainer = document.getElementById('barContainer');
//用於使chart自適應高度和寬度,經過窗體高寬計算容器高寬
var resizeWorldMapContainer = function() {
    $("#form").width($(window).width());
    $("#form").height($(window).height());
    $("#mapContainer").width($("#form").width()*3/5);
    $("#mapContainer").height(($("#form").height()-44)*3/5);
    $("#barContainer").width($("#form").width()*2/5);
    $("#barContainer").height(($("#form").height()-44)*2/5);
    $("#pieContainer").width($("#form").width()*1/5);
    $("#pieContainer").height(($("#form").height()-44)*3/5);
    $("#pieContainer").css('left',$("#form").width()*1/5);
    $("#dataContainer").width($("#form").width()*1/5);
    $("#dataContainer").height(($("#form").height()-44)*3/5);
};

// 基於準備好的dom，初始化echarts實例
var myChart1 = echarts.init(mapContainer);
var myChart2 = echarts.init(pieContainer);
var myChart3 = echarts.init(barContainer);

var uploadedDataURL = "china.json";
myChart1.showLoading();
myChart2.showLoading();
myChart3.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('china', geoJson);

    myChart1.hideLoading();
    myChart2.hideLoading();
    myChart3.hideLoading();
    myChart1.setOption(myOptions[0],true);
    myChart2.setOption(myOptions[1],true);
    myChart3.setOption(myOptions[2],true);

    //重置容器高寬
    resizeWorldMapContainer();
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();

    //用於使chart自適應高度和寬度
    window.onresize = function() {
      //重置容器高寬
      resizeWorldMapContainer();
      myChart1.resize();
      myChart2.resize();
      myChart3.resize();
    };
});

$(function() {
    //定時循環
    // var interval = setInterval("redoMethod()", 5000); //每隔一秒執行一次redoMethod()
    //假若有兩個按鈕：繼續、暫停
    $("#btnSet").click(function() { //點擊暫停按鈕
        // if (interval) {
        //     clearInterval(interval);
        //     interval = null;
        // }
        if ($(this).attr("title") == "點擊中止") {
            $(this).attr("title", "點擊開始");
            $(this).attr("class", "btnPlay");
        } else {
            $(this).attr("title", "點擊中止");
            $(this).attr("class", "btnPause");
            // interval = setInterval("redoMethod()", 5000);
        }

    });

    var s = '<table>';
    s += '<tr>';
    s += '<td class=\"left\">訂單數</td>';
    s += '<td class=\"right\">'+ datadata[0] +'</td>';
    s += '</tr>';
    s += '<tr>';
    s += '<td class=\"left\">平臺企業</td>';
    s += '<td class=\"right\">'+ datadata[1] +'</td>';
    s += '</tr>';
    s += '<tr>';
    s += '<td class=\"left\">平臺車輛</td>';
    s += '<td class=\"right\">'+ datadata[2] +'</td>';
    s += '</tr>';
    s += '</table>';
    $('#dataContainer').html(s);
    // <table>
    //     <tr>
    //         <td class="left">訂單數</td>
    //         <td class="right">12341</td>
    //     </tr>
    //     <tr>
    //         <td class="left">平臺企業</td>
    //         <td class="right">875</td>
    //     </tr>
    //     <tr>
    //         <td class="left">平臺車輛</td>
    //         <td class="right">1332</td>
    //     </tr>
    // </table>
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。