Echarts 开发静态数据模拟实现迁徙图步骤详解

最新推荐文章于 2024-07-31 17:33:03 发布

Nick Peng

最新推荐文章于 2024-07-31 17:33:03 发布

阅读量3.5k

点赞数 8

分类专栏： Echarts 文章标签： Echarts迁徙图数据可视化

本文链接：https://blog.youkuaiyun.com/PY0312/article/details/104585293

版权

文章目录

一、前言
二、先来看看百度迁徙图
三、Echarts 实现迁徙图基本步骤
四、最终实现效果图
五、完整源代码及解析

一、前言

ECharts 的学习也有一段时间了，相信学习可视化的同学一定看过百度大数据迁徙图，超级炫！！！

今天咱也来模拟一下北上广三个城市前十名的迁徙图，虽然不及百度，但是做个基本模板还是不错的！！

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

二、先来看看百度迁徙图

是不是很炫！超赞

【步入正题】

三、Echarts 实现迁徙图基本步骤

第一步：引入Echarts.js及相关JS

新建一个 html 文件，在 head 里面导入我们画图所要用到的 echarts.js 和 china.js；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts迁徙图</title>
    <!-- 1. 引入Echarts.js及相关JS（这里要用到地图，所以要导入china.js） -->
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
</head>
<body>

</body>
<html>

第二步：为ECharts准备一个Dom

在 body 里面添加以下代码，为 Echarts 准备一个固定大小的Dom；

<body>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
</body>

第三步：基于Dom初始化echarts实例

紧接着继续在 body 的 script里面，为 echarts 初始化一个实例myChart；

<body>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
    <script type="text/javascript">
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    </script>
</body>

第四步：为Echarts设定配置项（ `难点`）

这一步也是难点，有js经验的朋友，看起来肯定很容易，没有js经验的朋友也不用怕，我在代码中已做了详细的注释；

<body>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
    <script type="text/javascript">
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 4. 配置Echarts的配置项option
        // 4.1 准备相关JS变量，如下：
        // 变量1：geoCoordMap：用于给地图上的城市显示的经纬度坐标
        // 变量2：BJData：模拟 北京 到其他前10城市对应的航线指标数据，在开发中是从数据库动态获取的
        // 变量3：SHData：模拟 上海 到其他前10城市对应的航线指标数据，在开发中是从数据库动态获取的
        // 变量4：GZData：模拟 广州 到其他前10城市对应的航线指标数据，在开发中是从数据库动态获取的
        // 变量5：planePath：模拟出发城市到各目的地城市所对应的路线图，用的是Path:// SVG画的矢量图-小飞机
        // 变量6：convertData：用于转换成需要的特定格式数据
        // 变量7：color：定义了对指定上述城市用SVG画图时线条的颜色
        // 变量8：series：图表的系列，开发时动态填充，这里提供静态数据
        // 变量9：option：指定图表的配置项和series
        var geoCoordMap = {
      
            '上海': [121.4648, 31.2891],
            '东莞': [113.8953, 22.901],
            ......
            '北京': [116.4551, 40.2539],
			......
            '韶关': [113.7964, 24.7028]
        };
        var BJData = [
            [{
      name:'北京'}, {
      name:'上海',value:95}],
            [{
      name:'北京'}, {
      name:'广州',value:90}],
            [{
      name:'北京'}, {
      name:'大连',value:80}],
            [{
      name:'北京'}, {
      name:'南宁',value:70}],
            [{
      name:'北京'}, {
      name:'南昌',value:60}],
            [{
      name:'北京'}, {
      name:'拉萨',value:50}],
            [{
      name:'北京'}, {
      name:'长春',value:40}],
            [{
      name:'北京'}, {
      name:'包头',value:30}],
            [{
      name:'北京'}, {
      name:'重庆',value:20}],
            [{
      name:'北京'}, {
      name:'常州',value:10}]
        ];
        var SHData = [
            [{
      name:'上海'},{
      name:'包头',value:95}],
            [{
      name:'上海'},{
      name:'昆明',value:90}],
            [{
      name:'上海'},{
      name:'广州',value:80}],
            [{
      name:'上海'},{
      name:'郑州',value:70}],
            [{
      name:'上海'},{
      name:'长春',value:60}],
            [{
      name:'上海'},{
      name:'重庆',value:50}],
            [{
      name:'上海'},{
      name:'长沙',value:40}],
            [{
      name:'上海'},{
      name:'北京',value:30}],
            [{
      name:'上海'},{
      name:'丹东',value:20}],
            [{
      name:'上海'},{
      name:'大连',value:10}]
        ];
        var GZData = [
            [{
      name:'广州'},{
      name:'福州',value:95}],
            [{
      name:'广州'},{
      name:'太原',value:90}],
            [{
      name:'广州'},{
      name:'长春',value:80}],
            [{
      name:'广州'},{
      name:'重庆',value:70}],
            [{
      name:'广州'},{
      name:'西安',value:60}],
            [{
      name:'广州'},