echarts-all实现炫酷地图markPoint流动指示图表效果代码

代码语言:html

所属分类:图表

代码描述:echarts-all实现炫酷地图markPoint流动指示图表效果代码,可作为人口迁移流动图、运输图等图表用途。

代码标签: echarts-all 炫酷 地图 markPoint 流动 指示 图表

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="utf-8">

</head>

<body style="background:#1B1B1B">

    <div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B"></div>

 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-all.js"></script>



    <script type="text/javascript">
        $('#document').ready(function () {           
            
            getEcharts();       
            
            
        });
    </script>
    <script type="text/javascript">
        function getEcharts() {
  
          var myChart2 = echarts.init(document.getElementById('mainMap'));
          myChart2.setOption({
              dataRange: {
                  min: 0,
                  max: 100,
                  calculable: true,
                  color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
                  textStyle: {
                      color: '#fff'
                  }
              },
              series: [{
                  name: '全国',
                  type: 'map',
                  roam: true,
                  hoverable: false,
                  mapType: 'china',
                  itemStyle: {
                      normal: {
                          borderColor: 'rgba(100,149,237,1)',
                          borderWidth: 0.5,
                          areaStyle: {
                              color: '#1b1b1b'
                          }
                      }
                  },
                  data: [],
                  markLine: {
                      smooth: true,
                      symbol: ['none', 'circle'],
                      symbolSize: 1,
                      itemStyle: {
                          normal: {
                              color: '#fff',
                              borderWidth: 1,
                              borderColor: 'rgba(30,144,255,0.5)'
                          }
                      },
                      data: [],
                  },
                  geoCoord: {
                      '上海': [121.4648, 31.2891],
                      '东莞': [113.8953, 22.901],
                      '东营': [118.7073, 37.5513],
                      '中山': [113.4229, 22.478],
                      '临汾': [111.4783, 36.1615],
                      '临沂': [118.3118, 35.2936],
                      '丹东': [124.541, 40.4242],
                      &#.........完整代码请登录后点击上方下载按钮下载查看

网友评论0