编程知识 cdmana.com

[front end] the map of the location of the hospital is displayed on the large screen

design sketch :

Import js and css


    <link rel="stylesheet" href="./src/css/screen_style/css/index.css"> 

<script src="./src/js/jquery.js"></script>
             <script src="./src/js/echarts.min.js"></script>
             <script src="./src/js/index.js"></script>
             <script src="./src/js/province/jiangxi.js"></script>

screen.html

 
             <!--  Map  -->
             <div class="map">
                 <h3>
                     <span class="icon-cube"></span>

                 </h3>
                 <div class="chart">
                     <div class="geo" id="MAP01"></div>
                 </div>
             </div>
            

screen.html---js Code

  function onload() {
                     init_title();
                     init_mz001();
                     init_mz002();
                     init_option();
                     init_ksdata();
                     init_qydata();
                     init_div_MAP01();
                     //move();
                     //binddata();
                 }


                 // Map settings 
                 function init_div_MAP01() {
                     var myChart = echarts.init(document.getElementById('MAP01'));
                     var geoCoorddata = {
                         ' Shangrao maternal and child health care hospital ': [117.97, 28.45]
                     };
                     var postion_map = [];
                     $.ajax({
                         type: "post",
                         url: "json/Data.aspx?cmd=get_option",

                         data: { key: " Map " },
                         dataType: "JSON",
                         async:false,
                         jsonpCallback: "flightHandler",

                         success: function (result) {

                             postion_map = (result.data. value ).split("|");
                            // console.log(postion_map);
                         }

                     });
                     var val_temp = postion_map[1].split(",");
                     var val_arr = [];
                     val_arr.push(Number.parseFloat(val_temp[0]));
                     val_arr.push(Number.parseFloat(val_temp[1]));
                     //console.log(val_arr);

                     var moveLine = {
                         'normal': []
                     };
                     var data = [
                       { name: postion_map[0], value: val_arr }//geoCoorddata[' Shangrao maternal and child health care hospital '].concat(10000)
                     ];
                     //console.log(data);
                     var series = [];
                     series.push(
                       {
                           name: 'effectScatter',
                           type: 'effectScatter',
                           coordinateSystem: 'geo',
                           data: data,
                           rippleEffect: {
                               period: 4,
                               scale: 2.5,
                               brushType: 'stroke'
                           },
                           label: {
                               normal: {
                                   formatter: '{b}',
                                   position: 'bottom',
                                   show: true
                               },
                               emphasis: {
                                   show: true
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: '#F4E925'// The font color 
                               },
                               label: {
                                   show: true
                               }
                           }
                       }
                     );

                     var option = {
                         backgroundColor: '#080a20',
                         title: {
                             left: 'left',
                             textStyle: {
                                 color: '#fff'
                             }
                         },
                         tooltip: {
                             trigger: 'item'
                         },
                         geo: {
                             zoom: 1.2,
                             show: true,
                             map: ' jiangxi ',
                             mapType: ' jiangxi ',
                             label: {
                                 normal: {
                                     show: false,
                                     textStyle: { color: "#4bf316" }
                                 },
                                 emphasis: {
                                     show: true,
                                     textStyle: {
                                         color: '#fff'
                                     }
                                 },
                             },
                             roam: true,
                             itemStyle: {
                                 normal: {
                                     borderColor: 'rgba(147, 235, 248, 1)',
                                     borderWidth: 2,
                                     areaColor: {
                                         type: 'radial',
                                         x: 0.5,
                                         y: 0.5,
                                         r: 0.8,
                                         colorStops: [{
                                             offset: 0,
                                             color: 'rgba(175,238,238, 0)' // 0%  The color of 
                                         }, {
                                             offset: 1,
                                             color: 'rgba(   47,79,79, .2)' // 100%  The color of 
                                         }],
                                         globalCoord: false //  Default is  false
                                     },
                                     shadowColor: 'rgba(128, 217, 248, 1)',
                                     shadowOffsetX: -2,
                                     shadowOffsetY: 2,
                                     shadowBlur: 10
                                 },
                                 emphasis: {
                                     areaColor: '#389BB7',
                                     borderWidth: 0
                                 }
                             }
                         },
                         series: series
                     };
                     var myecharts = echarts.init($('#MAP01')[0]);
                     myecharts.setOption(option)
                 }

 

版权声明
本文为[A kind of Somuns]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224163612940g.html

Scroll to Top