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

相关文章：

  • 2022-12-23
  • 2021-08-21
  • 2022-12-23
  • 2022-12-23
  • 2021-09-25
  • 2021-06-02
  • 2021-04-16
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-21
  • 2021-08-27
  • 2023-03-06
  • 2021-10-11
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode