ECharts + Jquery 做大屏展示

HTML

<!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.js

/************************************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.js

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.js

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>
});

posted @ 2018-09-05 13:36 GaoAnLee 阅读(3592) 评论(0) 编辑收藏举报

刷新页面返回顶部

GaoAnLee

ECharts + Jquery 做大屏展示

公告