基于Echarts實作可視化資料大屏百度地圖醫療大資料模闆

前言

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

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

文章目錄

前言
一、Echart是什麼
二、ECharts入門教程
三、作品示範
四、代碼實作

1.HTML
2.CSS
3.JavaScript
4.Echarts

五、更多幹貨

一、Echart是什麼

ECharts是一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表。

二、ECharts入門教程

5 分鐘上手ECharts

三、作品示範

四、代碼實作

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料可視化demo</title>
<link href="../styles/common.css" rel="stylesheet">
<script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../scripts/Plugin/bmap.min.js"></script>
<script src="../scripts/common.js"></script>
<script src="../scripts/quota.js"></script>
</head>
<body>

<header class="header left">
<div class="left nav">
<ul>
<li><i class="nav_1"></i><a href="index.html">采集概況</a> </li>
<li><i class="nav_2"></i><a href="quota.html">名額分析</a> </li>
<li><i class="nav_3"></i><a href="trend.html">趨勢分析</a> </li>
<li class="nav_active"><i class="nav_4"></i><a href="chronic.html">慢病病人清單</a> </li>
</ul>
</div>
<div class="header_center left" style="position:relative">
<h2><strong>大資料展示</strong></h2>
</div>
<div class="right nav text_right">
<ul>
</ul>
</div>
</header>

<div class="con left">

<div class="con_div">
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_7.png" class="left text01_img" />
<div class="left text01_div">
<p>全年醫療費用(萬元)</p>
<p>1235</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_8.png" class="left text01_img" />
<div class="left text01_div">
<p>當月醫療費用(萬元)</p>
<p>235</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_9.png" class="left text01_img" />
<div class="left text01_div">
<p>全年體檢人數(人)</p>
<p class="sky">12356</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_10.png" class="left text01_img" />
<div class="left text01_div">
<p>當月體檢人數(人)</p>
<p class="sky">12356</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_11.png" class="left text01_img" />
<div class="left text01_div">
<p>西藥占比</p>
<p class="org">92%</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_12.png" class="left text01_img" />
<div class="left text01_div">
<p>中藥占比</p>
<p class="org">8%</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="../images/title_5.png">各醫院門診人次(人)</div>
<p id="histogramChart1" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_6.png">各醫院住院人次(人)</div>
<p id="histogramChart2" class="p_chart"></p>
</div>
</div>
<div class="left div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_7.png">各醫院醫療費用(元)</div>
<p id="lineChart1" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_8.png">各醫院體檢人次(人)</div>
<p id="lineChart2" class="p_chart"></p>
</div>
</div>
<div class="left div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_9.png">藥占比(%)</div>
<p id="histogramChart3" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_10.png">平均住院天數(天)</div>
<p id="histogramChart4" class="p_chart"></p>
</div>
</div>
<div class="left div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_11.png">手術工作量(台)</div>
<p id="pieChart1" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_12.png">床位數量分布(床)</div>
<p id="pieChart2" class="p_chart"></p>
</div>
</div>
</div>
</div>
</body>
</html>

2.CSS

body{
    font-size: 100%;
    height: 100%;
    background-color: #081832;
}
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("../images/logoBg.png");
    background-size: 100% 100%;
    font-family: "微軟雅黑"!important;


}
.header_center h2{
   margin-top: 16px !important;
   font-size: 22px !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: url("../images/nav_1.png");
 }
.nav_2{
    background-image: url("../images/nav_2.png");
}
.nav_3{
    background-image: url("../images/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;

}
.div_any_child{
    width: 100%;
    height: 330px;
    box-shadow: -10px 0px 15px #034c6a inset, /*å·¦è¾¹é˜´å½±*/
    0px -10px 15px #034c6a inset, /*ä¸Šè¾¹é˜´å½±*/
    10px 0px 15px #034c6a inset, /*å³è¾¹é˜´å½±*/
    0px 10px 15px #034c6a inset;
    border: 1px solid #034c6a;
    box-sizing: border-box;
    position: relative;
    margin-top: 25px;
}
.div_any_child01{
    width: 48%;

    box-shadow: -10px 0px 15px #034c6a inset, /*å·¦è¾¹é˜´å½±*/
    0px -10px 15px #034c6a inset, /*ä¸Šè¾¹é˜´å½±*/
    10px 0px 15px #034c6a inset, /*å³è¾¹é˜´å½±*/
    0px 10px 15px #034c6a inset;
    border: 1px solid #034c6a;
    box-sizing: border-box;
    position: relative;
    margin-right: 2%;

}
.div_any_child01_wh{
    width: 98% !important;
}
.div_height01{
    height: auto !important;
    padding: 5px;
}
.char_table{
    height: 200px;
}
.p_chart{
    height: 288px;

    padding: 5px 10px;

    margin-top: 15px;

}
#map_div{
    width: 96%;
    height: 94%;
}
.div_height{
    height:685px !important;
}
.div_any_title{
    background-color: #034c6a;
    border-radius: 18px;
    position: absolute;
    height: 35px;
    width: 60%;
    top:-15px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    left: 20%;
    line-height: 35px;
    text-align: center;
}
.div_any_title img{
    width: 18px;
    height: 18px;
    position: relative;
    top:2px;
    margin-right: 5px;
}
.any_title_width{
    width: 30% !important;
    left: 35% !important;
}
.div_table{
    width: 98%;
    margin-left: 1%;
    margin-bottom: 25px;
    height: 280px;
}
.div_table_box{
    width: 23%;
    margin-right: 2%;
}
.table_p{
    height: 93%;
    margin-top: 7%;
    position: relative;


}.table_p01{
     height:auto !important;
     margin-top: 0!important;
     position: relative;


 }
.table_p01 table td{
    padding: 6px 0;
}
.table_p table{
    width: 100%;
    height: 100%;
    border-collapse: collapse;

    position: absolute;
    text-align: center;
}
.table_p table thead th{
    color: #61d2f7;
    font-size: 14px;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
}
.table_p table tbody{
    color: #ffffff;
   font-size: 13px;
}
.table_p table tbody tr:nth-child(2n+1){
    background-color: #072951;
    box-shadow: -10px 0px 15px #034c6a inset,
    10px 0px 15px #034c6a inset;
}

.car_left{
    width: 18%;
    height: 100%;
    background-color:  #081832;
}
.car_center{

    height: 100%;
    background-color:  #081832;
    width: 50.5%;
    margin-left: 0.5%;
}

3.JavaScript

function callResourceAdapter(type, url, requestContent, successCallback,) {
    if (requestContent == null){
        requestContent = {};
    }
    if (type == null){
        type = 'POST';
    }
    function invocationSuccess(result) {
        var resultJson = result;
        if(resultJson.msgCode == '800'){
            if (successCallback  && typeof(successCallback) == "function") {
                successCallback(resultJson.rows,resultJson.map,resultJson.vo,resultJson.msg);
            }
        }
        if(resultJson.msgCode == '801'){
            showToast(resultJson.msg);
        }
        if(resultJson.msgCode == '900'){
            var message = '系統錯誤，請聯系管理者';
            if(resultJson.msg){
                message = resultJson.msg;
            }
            showToast(message);
            if (failCallback  && typeof(failCallback) == "function") {
                failCallback();
            }
        }
    }
    function invocationFailure(error) {
        showToast('無法連接配接至伺服器,請稍後再試');
        if (failCallback  && typeof(failCallback) == "function") {
            failCallback();
        }
    }
    $.ajax({
        type: type,
        url: serverUrl+url,
        data: JSON.stringify(requestContent),
        crossDomain:true,
        contentType: "application/json; charset=utf-8",
        // dataType: "json",
        timeout:120000,
        statusCode:{
            404: function() {
                showToast('伺服器無響應,請稍後再試')
            },
            422: function() {
                showToast('應用程式請求對象錯誤,請稍後再試')
            },
            403: function() {
                showToast('無通路權限')
            },
            400: function() {
                showToast('應用程式請求無效,請稍後再試')
            },
        },
        success: function (data, textStatus,) {
            switch (jqXHR.status) {
                case 200:
                    invocationSuccess(data);
                    break;
                default:
                    break;
            }
        },
        error: function (jqXHR, textStatus,errorThrown) {
            invocationFailure(jqXHR);
        }
    })
  }

 function showToast(text,timeout) {
      $(".yui-toast-mask").remove();
      var html = [
          '<div class="yui-toast-mask">',
          '<div class="yui-toast">',
          '<div class="yui-toast-text">'+text+'</div>',
          '</div>',
          '</div>',
      ];
      var dom = $(html.join(''));
      $("body").append(dom);
      if(timeout&&typeof(timeout)=='number'){
          setTimeout(function () {
              dom.remove();
          },timeout);
      }
      $(".yui-toast-mask").click(function () {
          dom.remove();
      });
  }

  function hideToast() {
      $(".yui-toast-mask").remove();
  }

  function loaderShow() {
    var loadPage = $('<div class="loading" style="top:30%;left:50%;position: absolute;background: transparent;text-align: center;">' +
        '<img src="../images/loading.gif" />' +
        '</div>');
    $("#content").append(loadPage);
  }

  function loaderHide() {
    $(".loading").remove();
  }

  function getLocationDom() {
      var that = this;
      var html = "<div id='breadcrumb'>";
      $.each(LOCATION,function(index,data){
          if(index==0){
              html += '<a href="javascript:void(0)" class="tip-bottom"><i class="fa fa-home"></i>'+data+'</a>';
              return ;
          }
          if(index==LOCATION.length-1){
              html += '<a class="current">'+data+'</a>';
              return ;
          }
          html += "<a href='javascript:void(0)'>"+data+"</a>";
      });
      html += "</div>";
      $("#content-header").html(html);
  }

  function getNav(successCallback) {
      var postNav = [];
      postNav.push('<li class="submenu" data-for= "home">','<a href="javascript:void(0)"><span>首頁</span></a>');
      postNav.push('<li class="submenu" data-for= "analysis">','<a href="javascript:void(0)"><span>名額統計</span></a>');
        postNav.push('<li class="submenu" data-for= "trend">','<a href="javascript:void(0)"><span>趨勢排名</span></a>');
      $("#sidebar ul").html(postNav.join(''));

      if (successCallback&&typeof(successCallback) == 'function'){
           successCallback();
       }
  }

  function bindNav(navId) {
    var HEIGHT = $("body").height()-100;
    $("#content").height(HEIGHT);

    $(".container-fluid").slimScroll({
        height: HEIGHT+'px', //容器高度,預設250px
        size: '5px', //滾動條寬度,預設7px
        railColor: '#000000', //滾動條背景軌迹顔色,預設#333333
        railOpacity: 0.3, //滾動條背景軌迹透明度,預設0.2
        wheelStep: 10, //滾動條滾動值,預設20
        disableFadeOut: false //是否禁用滑鼠在内容處一定時間不動隐藏滾動條,當設定alwaysVisible為true時該參數無效,預設false
    });
    $("#"+navId).delegate("li[data-for='home']","click",function(){

      window.location.href="home.html"

    }).delegate("li[data-for='analysis']","click",function(){

      window.location.href="analysis.html"

    }).delegate("li[data-for='trend']","click",function(){

      window.location.href="trend.html"

    })
  }

  function last_year_month() {
    var list = [];
    var date = getFormatDate(new Date());
    var year = date.split("-")[0];
    var mouth = date.split("-")[1];
    for (var i=0;i<12;i++){
        var objM = mouth-i;
        var objY = year;
        if(objM<=0){
            objM = objM+12;
            objY = year -1;
        }
        if(objM<10){
            objM = "0"+objM;
        }
        var obj = objY +"-"+objM;
        list.push(obj)

    }
    return list;
  }

  function getFormatDate(date){
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();
    if(month<10){
        month = '0'+month.toString();
    }
    month = month.toString();
    if(day<10){
        day = '0'+day.toString();
    }
    day = day.toString();
    return year+'-'+month+'-'+day;
}

function last_month_day() {
    var list = [];
    var date = getFormatDate(new Date());
    var year = date.split("-")[0];
    var mouth = date.split("-")[1];
    var day = date.split("-")[2]-1;
    for (var i=0;i<30;i++){
        var objM = mouth;
        var objD = day-i;
        if(objD<=0){
            objD = objD+30;
            objM = mouth -1;
            objM = "0"+objM
        }

        var obj = year+"-"+objM +"-"+objD;
        list.push(obj)
    }
    return list;
}

function getFormatMonth(date){
  var year = date.getFullYear();
  var month = date.getMonth()+1;
  var day = date.getDate();
  if(month<10){
      month = '0'+month.toString();
  }
  month = month.toString();
  if(day<10){
      day = '0'+day.toString();
  }
  day = day.toString();
  return year+'-'+month;
}

//分頁
function paging(totalPage,currentPage) {
    $("#pagination").pagination({
        currentPage: currentPage,
        totalPage: totalPage,
        isShow: true,
        count: 8,
        homePageText: "首頁",
        endPageText: "尾頁",
        prevPageText: "上一頁",
        nextPageText: "下一頁",
        callback: function(current) {
            $("#current").text(current)
        }
    });
}

4.Echarts

$(function(){


  init();

})
function init(){



  var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];

  //各醫院門診人次
  var histogramChart1 = echarts.init(document.getElementById('histogramChart1'));
  histogramChart1.setOption({

     grid: {
         top: '20%',
         left: '32%'
     },
     xAxis: {
         show: false
     },
     yAxis: [{
         show: true,
         data:  ['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
         inverse: true,
         axisLine: {
             show: false
         },
         splitLine: {
             show: false
         },
         axisTick: {
             show: false
         },
         axisLabel: {
             color: '#fff',
             formatter: (value,) => {
                 return [

                     `{lg|${index+1}}  ` + '{title|' + value + '} '
                 ].join('\n')
             },
             rich: {
                 lg: {
                     backgroundColor: '#339911',
                     color: '#fff',
                     borderRadius: 15,
                     // padding: 5,
                     align: 'center',
                     width: 15,
                     height: 15
                 },
             }
         },


     }, {
         show: true,
         inverse: true,
         data: [4000, 3000, 2000, 1000],
         axisLabel: {
             textStyle: {
                 fontSize: 12,
                 color: '#fff',
             },
         },
         axisLine: {
             show: false
         },
         splitLine: {
             show: false
         },
         axisTick: {
             show: false
         },

     }],
     series: [{
         name: '條',
         type: 'bar',
         yAxisIndex: 0,
         data: [40, 30, 20, 10],
         barWidth: 10,
         itemStyle: {
             normal: {
                 barBorderRadius: 20,
                 color: function(params) {
                     var num = myColor.length;
                     return myColor[params.dataIndex % num]
                 },
             }
         },
         label: {
             normal: {
                 show: true,
                 position: 'inside',
                 formatter: '{c}%'
             }
         },
     }, {
         name: '框',
         type: 'bar',
         yAxisIndex: 1,
         barGap: '-100%',
         data: [100, 100, 100, 100],
         barWidth: 15,
         itemStyle: {
             normal: {
                 color: 'none',
                 borderColor: '#00c1de',
                 borderWidth: 3,
                 barBorderRadius: 15,
             }
         }
     }, ]
  })

  //各醫院住院人次
  var histogramChart2 = echarts.init(document.getElementById('histogramChart2'));
  histogramChart2.setOption({

     grid: {
         top: '20%',
         left: '32%'
     },
     xAxis: {
         show: false
     },
     yAxis: [{
         show: true,
         data:  ['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
         inverse: true,
         axisLine: {
             show: false
         },
         splitLine: {
             show: false
         },
         axisTick: {
             show: false
         },
         axisLabel: {
             color: '#fff',
             formatter: (value,) => {
                 return [

                     `{lg|${index+1}}  ` + '{title|' + value + '} '
                 ].join('\n')
             },
             rich: {
                 lg: {
                     backgroundColor: '#339911',
                     color: '#fff',
                     borderRadius: 15,
                     // padding: 5,
                     align: 'center',
                     width: 15,
                     height: 15
                 },
             }
         },


     }, {
         show: true,
         inverse: true,
         data: [2200, 2400, 2600, 2800],
         axisLabel: {
             textStyle: {
                 fontSize: 12,
                 color: '#fff',
             },
         },
         axisLine: {
             show: false
         },
         splitLine: {
             show: false
         },
         axisTick: {
             show: false
         },

     }],
     series: [{
         name: '條',
         type: 'bar',
         yAxisIndex: 0,
         data:  [22, 24, 26, 28],
         barWidth: 10,
         itemStyle: {
             normal: {
                 barBorderRadius: 20,
                 color: function(params) {
                     var num = myColor.length;
                     return myColor[params.dataIndex % num]
                 },
             }
         },
         label: {
             normal: {
                 show: true,
                 position: 'inside',
                 formatter: '{c}%'
             }
         },
     }, {
         name: '框',
         type: 'bar',
         yAxisIndex: 1,
         barGap: '-100%',
         data: [100, 100, 100, 100],
         barWidth: 15,
         itemStyle: {
             normal: {
                 color: 'none',
                 borderColor: '#00c1de',
                 borderWidth: 3,
                 barBorderRadius: 15,
             }
         }
     }, ]
  })

    //手術工作量
    var pieChart1 = echarts.init(document.getElementById('pieChart1'));
    pieChart1.setOption({
      color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
      tooltip : {
       trigger: 'item',
       formatter: "{a}<br/>{b}<br/>{c}台"
      },
      calculable : true,
      series : [
          {
              name:'手術工作量',
              type:'pie',
              radius : [30, 110],
              center : ['50%', '50%'],
              roseType : 'area',
              x: '50%',
              max: 40,
              sort : 'ascending',
              data:[
                  {value:10, name:'廈門第一醫院'},
                  {value:5, name:'廈門中山醫院'},
                  {value:15, name:'廈門中醫院'},
                  {value:25, name:'廈門第五醫院'},
              ]
          }
      ]
    })

    //醫療費用
    var lineChart1 = echarts.init(document.getElementById('lineChart1'));
    lineChart1.setOption( {
      color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
      tooltip : {
           trigger: 'item',
           formatter: "{a}<br/>{b}<br/>{c}元"
       },
       legend: {
        data:['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
        y: 'bottom',
        x:'center',
        textStyle:{
            color:'#fff',
            fontSize:12
        }
      },
      grid:{
        left: '5%',
        right: '5%',
        bottom: '10%',
        containLabel: true
      },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : ['周一','周二','周三','周四','周五','周六','周日'],
              axisLine:{
                   lineStyle:{
                       color: '#87cefa'
                   },
               },
               axisLabel : {
                 interval:0,
                 rotate:40,

                   textStyle: {
                       color: '#fff',
                       fontSize:13
                   }
               }
          }
      ],
      yAxis : [
          {
              type : 'value',
              axisLine:{
                  lineStyle:{
                      color: '#87cefa'
                  },
              },
              splitLine: {
                  "show": false
              },
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  },
                  formatter: function (value) {
                      return value + "元"
                  },
              },
          }
      ],
      series : [
          {
              name:'廈門第一醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[10, 12, 21, 54, 260, 830, 710]
          },
          {
              name:'廈門中山醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[30, 182, 434, 791, 390, 30, 10]
          },
          {
              name:'廈門中醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[1320, 1132, 601, 234, 120, 90, 20]
          },
          {
              name:'廈門第五醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[320, 132, 61, 34, 20, 9, 2]
          }
      ]

    })

    //體檢人次
    var lineChart2 = echarts.init(document.getElementById('lineChart2'));
    lineChart2.setOption( {
      color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
      tooltip : {
           trigger: 'item',
           formatter: "{a}<br/>{b}<br/>{c}人"
       },
       legend: {
        data:['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
        y: 'bottom',
        x:'center',
        textStyle:{
            color:'#fff',
            fontSize:12
        }
      },
      grid:{
        left: '5%',
        right: '5%',
        bottom: '10%',
        containLabel: true
      },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : ['周一','周二','周三','周四','周五','周六','周日'],
              axisLine:{
                   lineStyle:{
                       color: '#87cefa'
                   },
               },
               axisLabel : {
                 interval:0,
                 rotate:40,

                   textStyle: {
                       color: '#fff',
                       fontSize:13
                   }
               }
          }
      ],
      yAxis : [
          {
              type : 'value',
              axisLine:{
                  lineStyle:{
                      color: '#87cefa'
                  },
              },
              splitLine: {
                  "show": false
              },
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  },
                  formatter: function (value) {
                      return value + "人"
                  },
              },
          }
      ],
      series : [
          {
              name:'廈門第一醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[120, 122, 221, 524, 460, 530, 610]
          },
          {
              name:'廈門中山醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[130, 682, 534, 691, 490, 130, 110]
          },
          {
              name:'廈門中醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[320, 132, 161, 134, 112, 190, 120]
          },
          {
              name:'廈門第五醫院',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data:[320, 132, 461, 34, 202, 93, 222]
          }
      ]

    })

    //床位數量分布
    var pieChart2 = echarts.init(document.getElementById('pieChart2'));
    pieChart2.setOption({
      color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
      tooltip : {
       trigger: 'item',
       formatter: "{a}<br/>{b}<br/>{c}床"
      },
      calculable : true,
      series : [
          {
              name:'床位數量分布',
              type:'pie',
              radius : [30, 110],
              center : ['45%', '50%'],
              roseType : 'area',
              x: '50%',
              max: 40,
              sort : 'ascending',
              data:[
                  {value:700, name:'廈門第一醫院'},
                  {value:500, name:'廈門中山醫院'},
                  {value:105, name:'廈門中醫院'},
                  {value:250, name:'廈門第五醫院'},
              ]
          }
      ]
    })

    //藥占比
    var histogramChart3 = echarts.init(document.getElementById('histogramChart3'));
    histogramChart3.setOption( {

      color:['#87cefa'],
      grid:{
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
      },
      tooltip : {
         trigger: 'item',
         formatter: "{a}<br/>{b}<br/>{c}%"
     },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              data : ['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
              axisLine:{
                   lineStyle:{
                       color: '#87cefa'
                   },
               },
               axisLabel : {
                 interval:0,
                 rotate:40,

                   textStyle: {
                       color: '#fff',
                       fontSize:13
                   }
               }
          }
      ],
      yAxis : [
          {
              type : 'value',
              axisLine:{
                  lineStyle:{
                      color: '#87cefa'
                  },
              },
              splitLine: {
                  "show": false
              },
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  },
                  formatter: function (value) {
                      return value + "%"
                  },
              },
          }
      ],
      series : [
          {
              name:'藥占比',
              type:'bar',
              barWidth:30,
              data:[60,80,70,50],
          },
      ]
    });

    //平均住院天數
    var histogramChart4 = echarts.init(document.getElementById('histogramChart4'));
    histogramChart4.setOption( {
      color:['#87cefa'],
      grid:{
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
      },
      tooltip : {
         trigger: 'item',
         formatter: "{a}<br/>{b}<br/>{c}天"
     },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              data : ['廈門第一醫院','廈門中山醫院','廈門中醫院','廈門第五醫院',],
              axisLine:{
                   lineStyle:{
                       color: '#87cefa'
                   },
               },
               axisLabel : {
                 interval:0,
                 rotate:40,

                   textStyle: {
                       color: '#fff',
                       fontSize:13
                   }
               }
          }
      ],
      yAxis : [
          {
              type : 'value',
              axisLine:{
                  lineStyle:{
                      color: '#87cefa'
                  },
              },
              splitLine: {
                  "show": false
              },
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  },
                  formatter: function (value) {
                      return value + "天"
                  },
              },
          }
      ],
      series : [
          {
              name:'平均住院天數',
              type:'bar',
              barWidth:30,
              data:[6,8,7,5],
          },
      ]
    });

}

基于Echarts實作可視化資料大屏百度地圖醫療大資料模闆

前言

文章目錄

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

2.CSS

3.JavaScript

4.Echarts

繼續閱讀

Nacos 2.0 更新前後性能對比壓測

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

尚矽谷—韓順平—圖解 Java設計模式（結構型）（55～）

Storm編譯打包過程中遇到的一些問題及解決方法

web開發之前後端渲染

vue學習筆記day12 vue的生命周期

MapReduce的幾個企業級經典面試案例MapReduce的幾個企業級經典面試案例

9.spark Core 進階2--Cashe

403 Forbidden，You don't have permission to access / on this server.Forbidden

淺談企業活動中進行資料分析的重要性

父子元件間傳值的實作父子元件間傳值的實作

Ambari介紹和架構原理

NOSQL安全攻擊

win10本地scala和spark安裝安裝scala安裝spark

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目