Echarts可视化2019年想去的地方

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

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

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

下面我们使用百度地图API和echarts可视化2019想要去的地方

第一步

初始化文件

引入echarts，jquery和bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>
  



<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
</body>
</html>

第二步:

准备好html内容

准备好输入框和echarts容器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body{
      padding-top:80px;
    }
    #add-btn{
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
      <form class="form-horizontal">
        <input id="place-input" type="text" class="form-control" value="" placeholder="请输入地址">
        <button type="button" id="add-btn" class="btn btn-success">
          查询
        </button>
      </form>

    </div>
    <div class="col-md-6">
      <div id="main" style="height:500px;"></div>
    </div>
  </div>
</div>  



<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
</body>
</html>

第三步

申请百度开发者密钥

准备好输入框和echarts容器

研究geocoder接口使用

绑定事件，用户点击可以跨域调百度接口，获取经纬度信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body{
      padding-top:80px
    }
    #search-btn{
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
      <form class="form-horizontal">
        <input id="place-input" type="text" class="form-control" value="丽江古城" placeholder="请输入地址">
        <button type="button" id="search-btn" class="btn btn-success">
          查询
        </button>
      </form>

    </div>
    <div class="col-md-6">
      <div id="main" style="height:500px;"></div>
    </div>
  </div>
</div>  
<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>  
// 画地图必须要经纬度数据
// 百度地图的开发者秘钥
var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
var ePlaceInput = $('#place-input')
var eSearchBtn = $('#search-btn')

eSearchBtn.click(function() {
  var place = ePlaceInput.val()
  if (place) {
    $.getJSON(url + place + '&callback=?', function(res) {
      if (res.status === 0) {
        console.log(place, res.result)
      }else{
        alert('百度没有找到地址信息')
      }
    })
  }
})



</script>
</body>
</html>

第四步

根据获取经纬度数据，地图标记

使用echarts渲染数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body{
      padding-top:80px
    }
    #search-btn{
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
      <form class="form-horizontal">
        <input id="place-input" type="text" class="form-control" value="丽江古城" placeholder="请输入地址">
        <button type="button" id="search-btn" class="btn btn-success">
          查询
        </button>
      </form>

    </div>
    <div class="col-md-6">
      <div id="main" style="height:500px;"></div>
    </div>
  </div>
</div>  
<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>  
// 百度地图的开发者秘钥
var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'

var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
var ePlaceInput = $('#place-input')
var eSearchBtn = $('#search-btn')
var myChart = echarts.init(document.getElementById('main'))

eSearchBtn.click(function() {
  // 获取输入框的值
  var place = ePlaceInput.val()
  if (place) {
    $.getJSON(url + place + '&callback=?', function(res) {
      if (res.status === 0) {
        drawMap(place, res.result.location)
      }else{
        alert('百度没有找到地址信息')
      }
    })
  }
})

function drawMap(name, loc) {

  var option = {
    backgroundColor: '#404a59',
    title: {
      text: '地址搜索',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
    series: [{
      name: '地址',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [{
        name: name,
        value: [loc.lng, loc.lat]
      }],
      symbolSize: function(val) {
        return 10;
      },
    }]
  }
  myChart.setOption(option)
}

</script>
</body>
</html>

第五步

持续标记

加上导出图片功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body{
      padding-top:80px
    }
    #search-btn{
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
      <form class="form-horizontal">
        <input id="place-input" type="text" class="form-control" value="丽江古城" placeholder="请输入地址">
        <button type="button" id="search-btn" class="btn btn-success">
          查询
        </button>
      </form>

    </div>
    <div class="col-md-6">
      <div id="main" style="height:500px;"></div>
    </div>
  </div>
</div>  
<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>  
// 百度地图的开发者秘钥
var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
var ePlaceInput = $('#place-input')
var eSearchBtn = $('#search-btn')
var myChart = echarts.init(document.getElementById('main'))
var chartData = []
eSearchBtn.click(function() {
  var place = ePlaceInput.val()
  if (place) {
    $.getJSON(url + place + '&callback=?', function(res) {
      var loc
      if (res.status === 0) {
        loc = res.result.location
        chartData.push({
          name: name,
          value: [loc.lng, loc.lat]
        })
        drawMap(place)
      }else{
        alert('百度没有找到地址信息')
      }
    })
  }
})

function drawMap(name) {

  var option = {
    backgroundColor: '#404a59',
    title: {
      text: '2019要去的地方',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
    series: [{
      name: '地址',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: chartData,
      symbolSize: function(val) {
        return 10;
      },
    }]
  }
  myChart.setOption(option)
}

</script>
</body>
</html>

运行结果如下所示:

Echarts可视化2019年想去的地方

猜你喜欢