天天看點
傳回

基于Echarts實作可視化資料大屏機械裝置監測大資料統計平台HTML頁面

前言

🚀 基于 Echarts 實作可視化資料大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作， 可以在此基礎上重新開發。

本項目中使用的是echarts圖表庫，ECharts 提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多元資料可視化的平行坐标，還有用于 BI 的漏鬥圖，儀表盤，并且支援圖與圖之間的混搭。

​

文章目錄

  • ​​前言​​
  • ​​一、Echart是什麼​​
  • ​​二、ECharts入門教程​​
  • ​​三、作品示範​​
  • ​​四、代碼實作​​
  • ​​1.HTML​​
  • ​​2.CSS​​
  • ​​3.JavaScript​​
  • ​​五、更多幹貨​​

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>理工雲</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>

<body>
    <!--主體-->
    <div class="main clearfix">
        <div class="main-left">
            <div class="border-container containertop">
                <h5 class="name-title tile-size-color">裝置狀态</h5>
                <div id="radar">
                    <div class="radarkong">
                        <p class="tile-size-color">裝置總數 :<span class="Totalequipment">660個</span>統計時間 :<span>2019.03.26 15:28</span></p>
                    </div>
                    <div class="pie-chart" id="pie-chart"></div>
                    <ul class="SiteStatusList">
                        <li><i class="Statusnormal Statussame"></i>正常：<span>556</span></li>
                        <li><i class="Statusemergency Statussame"></i>告警：<span>40</span></li>
                        <li><i class="StatusOffline Statussame"></i>離線：<span>30</span></li>
                    </ul>
                </div>
            </div>
            <div class="border-container containerbottom">
                <div class="name-title tile-size-color">裝置類型分布</div>
                <div class="graduateyear">
                    <div class="bar-chart" id="bar-chart"></div>
                    <ul class="SiteStatusList">
                        <li>本周資料</li>
                        <li class="DataSwitch"><i class="ThisweekData Datasame" onclick="DataSwitch(this,1)"></i><i class="ThisweekData" onclick="DataSwitch(this,2)"></i></li>
                        <li class="Defaultgray">本月資料</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-middle">
            <div class="border-container containertop">
                <div class="name-title tile-size-color">故障裝置區域分布情況</div>
                <div id="mapadd">
                    <div class="mapleft">
                        <div class="progress2-chart" id="progress2-chart"></div><a href="###" class="progressMore">更多></a></div>
                    <div class="map-chart" id="map-chart"></div>
                    <ul class="Devicestatus-List">
                        <li class="Online2">65.5% <span class="DevicestatusName">線上</span></li>
                        <li class="Online2"> 10.5% <span class="DevicestatusName">離線</span></li>
                        <li class="Online2"> 10.5% <span class="DevicestatusName">維護</span></li>
                        <li class="Online2"> 9.5% <span class="DevicestatusName">故障</span></li>
                    </ul>
                </div>
            </div>
            <div class="border-container containerbottom borderno-container">
                <ul class="teacher-pie clearfix">
                    <li class="teacherList">
                        <div class="name-title tile-size-color"> 故障時段分布</div>
                        <div id="courserate">
                            <div class="line-chart" id="line-chart"></div>
                            <ul class="SiteStatusList">
                                <li><i class="Statusnormal Statussame"></i>合計故障次數 <span>556</span></li>
                            </ul>
                        </div>
                    </li>
                    <li class="teacherList">
                        <div class="name-title tile-size-color">故障類型分布</div>
                        <div class="bars-chart" id="bars-chart"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-right">
            <div class="border-container containertop">
                <div class="name-title tile-size-color">優秀區域排名</div>
                <div class="progress1-chart" id="progress1-chart"></div>
            </div>
            <div class="border-container containerbottom">
                <div class="name-title tile-size-color">故障類型分布</div>
                <div id="radar-chart" class="radar-chart"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/new_file.js"></script>
    <script type="text/javascript" src="js/maps.js"></script>
</body>

</html>

2.CSS 

/* Create by gaojiye */

@charset "utf-8";
/*é€šç”¨æ ·å¼Í¨*/

body,
html,
.main {
    height: 100%;
    width: 100%;
}

body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ol {
    margin: 0;
    padding: 0;
}

ul,
li,
ol {
    list-style: none;
}

a:link,
a:visited,
a:active {
    text-decoration: none;
}

body {
    background: #040f3c;
}

.main-left,
.main-right {
    float: left;
    width: 28%;
    height: 100%;
    padding: 0 5px;
}

.main-middle {
    float: left;
    width: 44%;
    height: 100%;
    padding: 0 5px;
}

.border-container {
    position: relative;
    margin-top: 10px;
    /* padding: 10px;*/
    border: 1px solid #24214e;
}

.main-middle .borderno-container {
    border-top: none;
    border-bottom: none;
}

.name-title {
    background: #4545e3;
    padding: 8px 14px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    position: absolute;
    left: 5%;
}

.tile-size-color {
    font-size: 12px;
    color: #fff;
}

.containertop {
    height: 50%;
}

.containerbottom {
    height: 47%;
}

#radar,
.graduateyear,
.bar-chart,
#courserate,
.line-chart,
.bars-chart,
.radar-chart,
.progress1-chart,
#mapadd,
.progress2-chart {
    height: 100%;
}

#mapadd {
    position: relative;
}

#radar .radarkong {
    height: 17%;
    position: relative;
}

.Totalequipment {
    margin-right: 18px;
}

#radar .radarkong p {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}

.SiteStatusList {
    position: absolute;
    bottom: 10%;
    color: #fff;
    font-size: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.SiteStatusList li:first-child {
    margin-left: 22px;
}

.SiteStatusList li {
    margin-right: 20px;
}

.SiteStatusList .Statussame {
    float: left;
    padding: 5px;
    margin-top: 2px;
    margin-right: 5px;
}

.SiteStatusList .Statusnormal {
    background: #4f8bf9;
}

.SiteStatusList .Statusemergency {
    background: #fea31e;
}

.SiteStatusList .StatusOffline {
    background: #959595;
}

.SiteStatusList .ThisweekData,
.SiteStatusList .ThisweekData {
    padding: 7px;
    border-radius: 50%;
    float: left;
    cursor: pointer;
}

.SiteStatusList .Datasame {
    background: #39c1f5;
}

.SiteStatusList .Defaultgray {
    color: #959595;
}

.SiteStatusList .DataSwitch {
    background: #555474;
    border-radius: 10px;
}

.teacher-pie,
.teacher-pie .teacherList {
    height: 100%;
}

.teacher-pie .teacherList {
    border: 1px solid #24214e;
    position: relative;
}

.teacher-pie .teacherList:first-child {
    width: 50%;
    border-left: none;
    float: left;
}

.teacher-pie .teacherList .name-title {
    padding-left: 10px;
}

.teacher-pie .teacherList:last-child {
    width: 49%;
    border-right: none;
    float: right;
}

.number-show {
    position: absolute;
    top: 20%;
    right: 5%;
}

#mapadd .mapleft {
    width: 33%;
    height: 100%;
    float: left;
    position: relative;
    /*background: #009688;*/
}

#mapadd .progressMore {
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 7%;
    top: 60%;
    text-decoration: underline;
}

#mapadd .map-chart {
    width: 65%;
    height: 100%;
    float: left;
}

#mapadd .Devicestatus-List {
    width: 50%;
    position: absolute;
    bottom: 12%;
    left: 4%;
    color: #fff;
}

#mapadd .Devicestatus-List li {
    float: left;
    height: 35px;
    margin-right: 1%;
    line-height: 35px;
    position: relative;
}

#mapadd .Devicestatus-List li:nth-of-type(1) {
    width: 65.5%;
    border: 1px solid #3ae034;
    background: rgba(58, 224, 52, 0.5);
}

#mapadd .Devicestatus-List li:nth-of-type(2) {
    width: 10.5%;
    border: 1px solid #778699;
    background: rgba(199, 134, 153, 0.5);
}

#mapadd .Devicestatus-List li:nth-of-type(3) {
    width: 10.5%;
    border: 1px solid #1b9fff;
    background: rgba(27, 159, 255, 0.5);
}

#mapadd .Devicestatus-List li:nth-of-type(4) {
    width: 9.5%;
    border: 1px solid #e77407;
    background: rgba(213, 116, 7, 0.5);
}

.Devicestatus-List .DevicestatusName {
    position: absolute;
    top: -35px;
    left: 0;
}

.pie-chart {
    width: 100%;
    height: 82%;
}

3.JavaScript 

//地圖旁邊的進度條
var progress2chart = "";

function progress2char() {
    progress2chart = echarts.init(document.getElementById("progress2-chart"));
    var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888];
    var grayBar = [1, 1, 1, 1, 1, ];
    var xingm = ['甯波', '台州', '焦作', '邢台', '嘉興'];
    option = {
        title: {
            text: '裝置故障率排名',
            left: '20%',
            top: "20%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        grid: {
            left: '32%', //如果離左邊太遠就用這個......
            right: '25%',
            bottom: '35%',
            top: '25%',
            containLabel: true
        },
        xAxis: [{
                show: false,
            },
            {
                show: false,
            }
        ],
        yAxis: {
            type: 'category',
            axisLabel: {
                show: true, //讓Y軸資料不顯示
            },

            axisTick: {
                show: false, //隐藏Y軸刻度
            },
            axisLine: {
                show: false, //隐藏Y軸線段
            },
        },
        series: [
            //背景色
            {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '10%', //統計條寬度 
                itemStyle: {
                    normal: {
                        barBorderRadius: 50,
                        color: 'rgba(41, 55, 94)'
                    },
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff', //百分比顔色
                        },
                        position: 'right',
                        formatter: function(data) {
                            return baifenbi[data.dataIndex] + '%'
                        },

                    }
                },
                z: 1,
                data: grayBar,
            },
            //藍條
            {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '10%', //統計條寬度
                itemStyle: {
                    normal: {
                        barBorderRadius: 50, //統計條弧度
                        color: "#ffa322"
                    },
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff', //百分比顔色
                        },
                        position: "left",
                        formatter: function(data) {
                            //富文本固定格式{colorName|這裡填你想要寫的内容}
                            return xingm[data.dataIndex]
                        },

                    }
                },
                data: baifenbi,
            },

        ]
    };
    progress2chart.setOption(option)
}

//地圖
var mapchart = "";

function mapchar() {
    var data = [{
            name: '焦作',
            value: 75
        },
        {
            name: '北京',
            value: 79
        },
        {
            name: '天津',
            value: 79
        },
        {
            name: '上海',
            value: 80
        },
        {
            name: '西安',
            value: 80
        },
        {
            name: '廣州',
            value: 80
        },
        {
            name: '深圳',
            value: 84
        },

    ];

    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],
        '潮州': [116.63, 23.68],
        '丹東': [124.37, 40.13],
        '太倉': [121.1, 31.45],
        '曲靖': [103.79, 25.51],
        '煙台': [121.39, 37.52],
        '福州': [119.3, 26.08],
        '瓦房店': [121.979603, 39.627114],
        '即墨': [120.45, 36.38],
        '撫順': [123.97, 41.97],
        '玉溪': [102.52, 24.35],
        '張家口': [114.87, 40.82],
        '陽泉': [113.57, 37.85],
        '萊州': [119.942327, 37.177017],
        '湖州': [120.1, 30.86],
        '汕頭': [116.69, 23.39],
        '昆山': [120.95, 31.39],
        '甯波': [121.56, 29.86],
        '湛江': [110.359377, 21.270708],
        '揭陽': [116.35, 23.55],
        '榮成': [122.41, 37.16],
        '連雲港': [119.16, 34.59],
        '葫蘆島': [120.836932, 40.711052],
        '常熟': [120.74, 31.64],
        '東莞': [113.75, 23.04],
        '河源': [114.68, 23.73],
        '淮安': [119.15, 33.5],
        '泰州': [119.9, 32.49],
        '南甯': [108.33, 22.84],
        '營口': [122.18, 40.65],
        '惠州': [114.4, 23.09],
        '江陰': [120.26, 31.91],
        '蓬萊': [120.75, 37.8],
        '韶關': [113.62, 24.84],
        '嘉峪關': [98.289152, 39.77313],
        '廣州': [113.23, 23.16],
        '延安': [109.47, 36.6],
        '太原': [112.53, 37.87],
        '清遠': [113.01, 23.7],
        '中山': [113.38, 22.52],
        '昆明': [102.73, 25.04],
        '壽光': [118.73, 36.86],
        '盤錦': [122.070714, 41.119997],
        '長治': [113.08, 36.18],
        '深圳': [114.07, 22.62],
        '珠海': [113.52, 22.3],
        '宿遷': [118.3, 33.96],
        '鹹陽': [108.72, 34.36],
        '銅川': [109.11, 35.09],
        '平度': [119.97, 36.77],
        '佛山': [113.11, 23.05],
        '海口': [110.35, 20.02],
        '江門': [113.06, 22.61],
        '章丘': [117.53, 36.72],
        '肇慶': [112.44, 23.05],
        '大連': [121.62, 38.92],
        '臨汾': [111.5, 36.08],
        '吳江': [120.63, 31.16],
        '石嘴山': [106.39, 39.04],
        '沈陽': [123.38, 41.8],
        '蘇州': [120.62, 31.32],
        '茂名': [110.88, 21.68],
        '嘉興': [120.76, 30.77],
        '長春': [125.35, 43.88],
        '膠州': [120.03336, 36.264622],
        '銀川': [106.27, 38.47],
        '張家港': [120.555821, 31.875428],
        '三門峽': [111.19, 34.76],
        '錦州': [121.15, 41.13],
        '南昌': [115.89, 28.68],
        '柳州': [109.4, 24.33],
        '三亞': [109.511909, 18.252847],
        '自貢': [104.778442, 29.33903],
        '吉林': [126.57, 43.87],
        '陽江': [111.95, 21.85],
        '泸州': [105.39, 28.91],
        '西甯': [101.74, 36.56],
        '宜賓': [104.56, 29.77],
        '呼和浩特': [111.65, 40.82],
        '成都': [104.06, 30.67],
        '大同': [113.3, 40.12],
        '鎮江': [119.44, 32.2],
        '桂林': [110.28, 25.29],
        '張家界': [110.479191, 29.117096],
        '宜興': [119.82, 31.36],
        '北海': [109.12, 21.49],
        '西安': [108.95, 34.27],
        '金壇': [119.56, 31.74],
        '東營': [118.49, 37.46],
        '牡丹江': [129.58, 44.6],
        '遵義': [106.9, 27.7],
        '紹興': [120.58, 30.01],
        '揚州': [119.42, 32.39],
        '常州': [119.95, 31.79],
        '濰坊': [119.1, 36.62],
        '重慶': [106.54, 29.59],
        '台州': [121.420757, 28.656386],
        '南京': [118.78, 32.04],
        '濱州': [118.03, 37.36],
        '貴陽': [106.71, 26.57],
        '無錫': [120.29, 31.59],
        '本溪': [123.73, 41.3],
        '克拉瑪依': [84.77, 45.59],
        '渭南': [109.5, 34.52],
        '馬鞍山': [118.48, 31.56],
        '寶雞': [107.15, 34.38],
        '焦作': [113.21, 35.24],
        '句容': [119.16, 31.95],
        '北京': [116.46, 39.92],
        '徐州': [117.2, 34.26],
        '衡水': [115.72, 37.72],
        '標頭': [110, 40.58],
        '綿陽': [104.73, 31.48],
        '烏魯木齊': [87.68, 43.77],
        '棗莊': [117.57, 34.86],
        '杭州': [120.19, 30.26],
        '淄博': [118.05, 36.78],
        '鞍山': [122.85, 41.12],
        '溧陽': [119.48, 31.43],
        '庫爾勒': [86.06, 41.68],
        '安陽': [114.35, 36.1],
        '開封': [114.35, 34.79],
        '濟南': [117, 36.65],
        '德陽': [104.37, 31.13],
        '溫州': [120.65, 28.01],
        '九江': [115.97, 29.71],
        '邯鄲': [114.47, 36.6],
        '臨安': [119.72, 30.23],
        '蘭州': [103.73, 36.03],
        '滄州': [116.83, 38.33],
        '臨沂': [118.35, 35.05],
        '南充': [106.110698, 30.837793],
        '天津': [117.2, 39.13],
        '富陽': [119.95, 30.07],
        '泰安': [117.13, 36.18],
        '諸暨': [120.23, 29.71],
        '鄭州': [113.65, 34.76],
        '哈爾濱': [126.63, 45.75],
        '聊城': [115.97, 36.45],
        '蕪湖': [118.38, 31.33],
        '唐山': [118.02, 39.63],
        '平頂山': [113.29, 33.75],
        '邢台': [114.48, 37.05],
        '德州': [116.29, 37.45],
        '濟甯': [116.59, 35.38],
        '荊州': [112.239741, 30.335165],
        '宜昌': [111.3, 30.7],
        '義烏': [120.06, 29.32],
        '麗水': [119.92, 28.45],
        '洛陽': [112.44, 34.7],
        '秦皇島': [119.57, 39.95],
        '株洲': [113.16, 27.83],
        '石家莊': [114.48, 38.03],
        '萊蕪': [117.67, 36.19],
        '常德': [111.69, 29.05],
        '保定': [115.48, 38.85],
        '湘潭': [112.91, 27.87],
        '金華': [119.64, 29.12],
        '嶽陽': [113.09, 29.37],
        '長沙': [113, 28.21],
        '衢州': [118.88, 28.97],
        '廊坊': [116.7, 39.53],
        '菏澤': [115.480656, 35.23375],
        '合肥': [117.27, 31.86],
        '武漢': [114.31, 30.52],
        '大慶': [125.03, 46.58]
    };
    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;
    };
    console.log(convertData(data));
    var uploadedDataURL = "js/data-1517645039291-B1vgpymUz.json";
    mapchart = echarts.init(document.getElementById("map-chart"));
    $.getJSON(uploadedDataURL, function(geoJson) {
        echarts.registerMap('zhongguo', geoJson);
        option = {
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    //console.log(params)
                    if (typeof(params.value)[2] == "undefined") {
                        return params.name
                    } else {
                        return params.name + ' : ' + params.value[2];
                    }
                }
            },
            geo: {
                show: true,
                map: 'zhongguo',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                left: '6%',
                right: '5%',
                top: "8%",
                itemStyle: {
                    normal: {
                        borderColor: '#4085d3',
                        borderWidth: 2,
                        shadowColor: '#000',
                        shadowBlur: 50,
                        areaColor: '#565cf8',
                    },
                    emphasis: {
                        areaColor: '#4f92fa' //滑鼠移上每一省份的顔色
                    }
                }
            },
            series: [{
                    type: 'map',
                    map: 'zhongguo',
                    geoIndex: 0,

                },
                {
                    name: 'Tooltip Test',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function(val) {
                        return val[2] / 5;
                    },
                    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
                }

            ]
        };
        //myChart.setOption(option);
        mapchart.setOption(option);
        mapchart.on('click', function(params) { //點選事件
            alert(params)
        });
    });
};
echarts大資料 vue+echarts 大屏資料可視化 echart資料可視化 echarts地圖
上一篇: mysql重點知識
下一篇: python圖檔動态特效_python實作圖檔的抖音效果

繼續閱讀