前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

基于Echarts实现可视化数据大屏交通类大数据展示页面模板_vue

四、代码实现

1.HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>首页界面</title>
  <link rel="stylesheet" href="css/base.css">
</head>

<body>

  <header class="header left">
    <div class="left nav">
      <ul>
        <li class="nav_active"><i class="nav_1"></i><a href="index.html">数据概览</a> </li>
        <li><i class="nav_2"></i><a href="carContrl.html">车辆监控</a> </li>
        <li><i class="nav_3"></i><a href="map.html">地图界面</a> </li>
      </ul>
    </div>
    <div class="header_center left">
      <h2><strong>xx区智慧旅游综合服务平台</strong></h2>
      <p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
    </div>
    <div class="right nav text_right">
      <ul>
        <li><i class="nav_7"></i><a href="static.html">查询统计</a> </li>
        <li><i class="nav_8"></i><a href="message.html">信息录入</a> </li>
        <li><i class="nav_4"></i><a href="table1.html">表格界面</a> </li>
      </ul>
    </div>















  </header>

  <div class="con left">

    <div class="select_time">
      <div class="static_top left">
        <i></i><span>总体概况</span>
      </div>
    </div>

    <div class="con_div">
      <div class="con_div_text left">
        <div class="con_div_text01 left">
          <img src="img/info_1.png" class="left text01_img">
          <div class="left text01_div">
            <p>车辆总数(辆)</p>
            <p>12356</p>
          </div>
        </div>
        <div class="con_div_text01 right">
          <img src="img/info_2.png" class="left text01_img">
          <div class="left text01_div">
            <p>车辆使用数(辆)</p>
            <p>12356</p>
          </div>
        </div>
      </div>
      <div class="con_div_text left">
        <div class="con_div_text01 left">
          <img src="img/info_4.png" class="left text01_img">
          <div class="left text01_div">
            <p>行驶里程总数(km)</p>
            <p class="sky">12356</p>
          </div>
        </div>
        <div class="con_div_text01 right">
          <img src="img/info_5.png" class="left text01_img">
          <div class="left text01_div">
            <p>行驶里程平均数(km)</p>
            <p class="sky">12356</p>
          </div>
        </div>
      </div>
      <div class="con_div_text left">
        <div class="con_div_text01 left">
          <img src="img/info_6.png" class="left text01_img">
          <div class="left text01_div">
            <p>行驶时长总数(s)</p>
            <p class="org">12356</p>
          </div>
        </div>
        <div class="con_div_text01 right">
          <img src="img/info_7.png" class="left text01_img">
          <div class="left text01_div">
            <p>行驶ihfj平均数(s)</p>
            <p class="org">12356</p>
          </div>
        </div>
      </div>
    </div>

    <div class="div_any">
      <div class="left div_any01">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_1.png">车辆类型统计 </div>
          <p id="char1" class="p_chart"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_2.png">车辆状态统计 </div>
          <p id="char2" class="p_chart"></p>
        </div>
      </div>
      <div class="div_any02 left ">
        <div class="div_any_child div_height">
          <div class="div_any_title any_title_width"><img src="img/title_3.png">车辆行驶地图 </div>
          <div id="map_div"></div>
        </div>
      </div>
      <div class="right div_any01">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_4.png">车辆行驶统计 </div>
          <p id="char3" class="p_chart"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_5.png">车辆报警统计 </div>
          <p id="char4" class="p_chart"></p>
        </div>
      </div>
    </div>

    <div class="div_table">
      <div class="left div_table_box">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_4.png">行驶里程排名前5位 </div>
          <div class="table_p">
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>车牌号</th>
                  <th>里程数（km）</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="left div_table_box">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_4.png">行驶次数车辆前5位 </div>
          <div class="table_p">
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>车牌号</th>
                  <th>次数（km）</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="left div_table_box">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_4.png">行驶最高时速前5位 </div>
          <div class="table_p">
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>车牌号</th>
                  <th>时速（km）</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="left div_table_box">
        <div class="div_any_child">
          <div class="div_any_title"><img src="img/title_4.png">行驶时长排名前5位 </div>
          <div class="table_p">
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>车牌号</th>
                  <th>时长（km）</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>京A12345</td>
                  <td>134.2</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  <script src="js/base.js"></script>
  <script src="js/index.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
  <script src="js/map.js"></script>
</body>

</html>

2.CSS

body{
    font-size: 100%;
}
a:hover{
    text-decoration: none;
}
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}

.text_right{
    text-align: right;
}
.header{
    width: 100%;
    height: 80px;
    background-color: #030829;

}
.header_center{
    width: 30%;
    margin: 0px auto;
    color: #FFFFff;
    text-align: center;
    height: 80px;
    background-image: url("../img/logoBg.png");
    background-size: 100% 100%;
    font-family: "微软雅黑"!important;


}
.header_center h2{
   margin-top: 10px !important;
    margin-bottom: 10px; !important;
    font-size: 18px !important;

}
.color_font{
    color: #e8f7fe !important;
    font-size: 12px !important;
}
.header_logo{
    margin-left: 1%;
    margin-top: 12px;

}
.header_logo img{
    height: 56px;
}
.nav{

    width: 35%;
}
.nav>ul{

}
.nav>ul>li{
    display: inline-block;
    width: 120px;
    text-align: center;
    height: 50px;
    position: relative;
    line-height: 50px;
    margin-top: 15px;
    box-sizing: border-box;
    /*box-shadow: -5px 0px 5px #034c6a inset, !*左边阴影*!*/
    /*0px -5px 15px #034c6a inset, !*上边阴影*!*/
    /*5px 0px 15px #034c6a inset, !*右边阴影*!*/
    /*0px 5px 15px #034c6a inset;*/


    border-radius: 5px;

}
.nav>ul>li:hover{
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    0px -10px 15px #034c6a inset, /*上边阴影*/
    10px 0px 15px #034c6a inset, /*右边阴影*/
    0px 10px 15px #034c6a inset;

    box-sizing: border-box;
}
.nav>ul>li i{
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top:3px;
    margin-right: 5px;
}
.nav>ul>li>a{
    color: #ffffff;
    /*display: inline-block;*/
    /*padding: 0 15px 0 5px;*/
    font-size: 14px;
}
/*.nav>ul>li:hover .li_ul{*/
    /*display: block;*/
/*}*/

.li_ul{
    position: absolute;
    background-color: #030829;
    width: 100%;
    /*border-top:4px solid #4b8df8;*/
    display: none;
    z-index: 999;

}
.li_ul li{
    line-height: 40px !important;
}
.li_ul li:hover{
    background-color: #4b8df8;
}
.li_ul li a{
    color: #ffffff;
    font-size: 13px;
}

.nav_1{
     background-image: url("../img/nav_1.png");
 }
.nav_2{
    background-image: url("../img/nav_2.png");
}
.nav_3{
    background-image: url("../img/nav_3.png");
}
.nav_4{
    background-image: url("../img/nav_4.png");
}
.nav_5{
    background-image: url("../img/nav_5.png");
}
.nav_6{
    background-image: url("../img/nav_6.png");
}
.nav_7{
    background-image: url("../img/nav_7.png");
}
.nav_8{
    background-image: url("../img/nav_9.png");
}
.nav_active{
    border-bottom: 4px solid #4b8df8;
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    0px -10px 15px #034c6a inset, /*上边阴影*/
    10px 0px 15px #034c6a inset, /*右边阴影*/
    0px 10px 15px #034c6a inset;

    box-sizing: border-box;
}
.con{
    width: 100%;
    background-color: #081832;
    padding-top: 20px;
    padding-bottom: 20px;
}
.con1{
    width: 100%;
    background-color: #081832cc;
    /*padding-bottom: 4px;*/
    box-sizing: border-box;
    overflow: auto;

;
}
.find_expend{
    display: none;
}
.con1::before{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.select_time{
    width: 140px;
    height: 36px;

    margin-bottom: 25px;
    margin-left: 1%;
   padding-left: 20px;
 ;

}
.select_time img{
    height: 18px;
    margin-top: 9px;
}
.select_time input{
    border: none;
    background-color: transparent;
    width: 80px;
    height: 20px;
   top:-5px;
    margin-left: 10px;
    position: relative;
    text-indent: 1em;
    outline: none;
}
.con_div{
    height: 110px;
    width: 98%;
    margin-left: 1%;
    margin-bottom: 25px;
}
.con_div_text{
    height: 100%;
    background-color: #034c6a;
    width: 32%;
    margin-right: 1.3%;
}
.con_div_text01{
    width: 50%;
    height: 100%;
}
.text01_img{
    width: 40px;
    height: 40px;
    margin-left: 5%;
  margin-top: 35px;
}
.text01_div{
    margin-top: 15px;
    margin-left: 5%;
    text-align: center;

}
.text01_div p{
    line-height: 35px;
}
.text01_div p:nth-child(1){
    font-size: 13px;
    color: #ffffff;
}
.text01_div p:nth-child(2){
    font-size: 28px;
    color: #ffff43;
    font-weight: 600;

}
.red{
    color: red !important;
}
.sky{
    color: #25f3e6 !important;
}
.org{
    color: #ff4e4e !important;
}
.div_any{
    width: 98%;
    margin-left: 1%;
    margin-bottom: 25px;
    height: 610px;
}
.div_any01{
    width: 23%;
    margin-right: 2%;
}
.div_any02{
    width: 48%;
    margin-right: 2%;
}
.div_any03{
    width: 98%;
   margin: 15px auto;

}

3.JavaScript

$(function () {
  char1();
  char2();
  char3();
  char4();
})

function char1() {
  var myChart = echarts.init($("#char1")[0]);
  option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      x: 'right',
      textStyle: {
        color: '#ffffff',
      },
      data: ['客运车', '危险品车', '网约车', '学生校车']
    },
    calculable: false,
    series: [{
      name: '车类型',
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          label: {
            show: true,
            position: 'center',
            textStyle: {
              fontSize: '20',
              fontWeight: 'bold'
            }
          }
        }
      },
      data: [{
        value: 335,
        name: '客运车'
      }, {
        value: 310,
        name: '危险品车'
      }, {
        value: 234,
        name: '网约车'
      }, {
        value: 135,
        name: '学生校车'
      }]
    }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
}

function char2() {
  var myChart = echarts.init($("#char2")[0]);
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      show: 'true',
      borderWidth: '0'
    },
    legend: {
      data: ['行驶', '停车', '熄火', '离线'],
      textStyle: {
        color: '#ffffff',
      }
    },
    calculable: false,
    xAxis: [{
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#f2f2f2'],
          width: 0,
          type: 'solid'
        }
      }
    }],
    yAxis: [{
      type: 'category',
      data: ['客运车', '危险品车', '网约车', '学生校车'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          width: 0,
          type: 'solid'
        }
      }
    }],
    series: [{
      name: '行驶',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'insideRight'
          }
        }
      },
      data: [320, 302, 301, 334]
    }, {
      name: '停车',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'insideRight'
          }
        }
      },
      data: [120, 132, 101, 134]
    }, {
      name: '熄火',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'insideRight'
          }
        }
      },
      data: [220, 182, 191, 234]
    }, {
      name: '离线',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'insideRight'
          }
        }
      },
      data: [150, 212, 201, 154]
    }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
}

function char3() {
  var myChart = echarts.init($("#char3")[0]);
  option = {
    legend: {
      data: ['车辆行驶数量'],
      textStyle: {
        color: '#ffffff',
      }
    },
    grid: {
      show: 'true',
      borderWidth: '0'
    },
    calculable: false,
    tooltip: {
      trigger: 'axis',
      formatter: "Temperature : <br/>{b}km : {c}°C"
    },
    xAxis: [{
      type: 'value',
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          width: 0,
          type: 'solid'
        }
      }
    }],
    yAxis: [{
      type: 'category',
      axisLine: {
        onZero: false
      },
      axisLabel: {
        formatter: '{value} km',
        textStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          width: 0,
          type: 'solid'
        }
      },
      boundaryGap: false,
      data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    }],
    series: [{
      name: '车辆行驶数量',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            shadowColor: 'rgba(0,0,0,0.4)'
          }
        }
      },
      data: [15, 0, 20, 45, 22.1, 25, 70, 55, 76]
    }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
}

function char4() {
  var myChart = echarts.init($("#char4")[0]);
  option = {
    grid: {
      show: 'true',
      borderWidth: '0'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        var tar = params[0];
        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
      }
    },
    xAxis: [{
      type: 'category',
      splitLine: {
        show: false
      },
      data: ['客运车', '危险品车', '网约车', '学生校车'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }],
    series: [{
      name: '报警数量',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'inside'
          }
        }
      },
      data: [2900, 1200, 300, 200, 900, 300]
    }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
}

4.Echarts

$(function () {


    initMap();





})
//地图界面高度设置



//加载地图
function initMap() {
    // 百度地图API功能
    var map = new BMap.Map("map_div"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    var size1 = new BMap.Size(10, 50);
    map.addControl(new BMap.MapTypeControl({
        offset: size1,
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP,

        ]
    }));
    // 编写自定义函数,创建标注
    function addMarker(point) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    }
    // 随机向地图添加25个标注
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < 25; i++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        addMarker(point);
    };

    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    //设备地图颜色
    var mapStyle = {
        style: "midnight"
    };
    map.setMapStyle(mapStyle);





    //加载城市控件
    var size = new BMap.Size(10, 50);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: size,


    }));
}

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，​​请 “👍点赞” “✍️评论” “💙收藏” ​​一键三连哦！

2.​​【关注我| 获取更多源码 | 优质文章】 ​​带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥