腾讯云AI代码助手编程挑战赛-可视化飞线图

全栈若城

发布于 2025-01-10 08:08:23

8800

代码可运行

文章被收录于专栏：若城技术专栏若城技术专栏

运行总次数：0

代码可运行

作品简介

本项目是借助腾讯云AI代码助手编写的基于ECharts库开发的交互式数据可视化工具。项目通过飞线图的形式，直观展示中国地图上各个城市之间的连接关系，适用于物流路径、交通网络、迁徙路线等多种场景的展示。

项目实现了以下核心功能：

地图展示：利用ECharts的geo组件，精确绘制中国地图，并支持地图的缩放和平移操作，以便用户从不同角度查看城市间的连接。
散点图应用：通过effectScatter系列，在地图上标注城市位置，并通过不同的视觉效果区分城市类型或状态。
飞线效果：采用lines系列，创建动态的飞线效果，形象地展示城市之间的联系，增强了数据的直观性和表现力。
交互性增强：项目提供了丰富的交互功能，包括地图的缩放、平移等，使用户能够更深入地探索和分析数据。
视觉效果优化：通过颜色、阴影等视觉元素的巧妙运用，提升了图表的整体美观度，使信息传递更加生动和吸引人。

技术架构

前端架构

HTML/CSS/JavaScript：构建网页的基本结构、样式和交互逻辑。
ECharts：一个基于 JavaScript 的开源可视化库，用于绘制飞线图和其他图表。
jQuery：用于简化DOM操作和事件处理，辅助前端开发。
HTML5 Canvas：ECharts底层使用Canvas进行图形渲染，保证了图表的高性能和流畅性。
数据处理 JSON：用于存储地理信息和城市坐标数据，便于前端解析和渲染。 JavaScript：编写脚本处理JSON数据，将其转换为ECharts可识别的格式。

实现过程

本项目的主要实现方式是通过与腾讯云AI代码助手的持续交互来完成。在这一过程中，我们利用精心设计的提示词和具体的项目需求，逐步优化和迭代代码。通过这样的方法，我们最终实现了项目的全面构建，确保了项目的功能性和完整性。

项目代码

html 部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts-飞线图</title>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #100C2A;
    }
  </style>

</head>

<body>
  <div id="chart" style="width: 100%; height: 1000px;"></div>
  <script>
    var jsonData;
    function getJson(data) {
      jsonData = data
    }
  </script>
  <script type="text/javascript" src="./json/geojson.json"></script>
  <script src="./js/china.js"></script>
  <script>
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      // backgroundColor: "#060E35",
      geo: [
        {
          map: "china",
          zoom: 1,
          // aspectScale: 1, // 横向拉伸
          layoutCenter: ["50%", "50%"], // 位置
          layoutSize: "80%", // 大小
          label: {
            show: true,
            normal: {
              show: false, // 默认地图文字字号和字体颜色
              fontSize: 12,
              color: "#ffffff",
            },
            emphasis: {
              show: true,
              fontSize: 12, // 选中地图文字字号和字体颜色
              offset: [0, -20],
              color: "#ffffff",
            },
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear",
                x: 1000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },
            emphasis: {
              areaColor: "rgba(0,254,233,0.6)",
              // borderWidth: 0
            },
          },
          textFixed: {
            Alaska: [20, -20],
          },
        },
      ],
      series: [
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          symbolSize: 8,
          rippleEffect: {
            number: 1,
            scale: 3,
            brushType: "stroke",
          },
          itemStyle: {
            color: "#E6A23C",
          },
          data: [],
        },
        {
          type: "effectScatter",
          zlevel: 3,
          coordinateSystem: "geo",
          symbolSize: 10,
          rippleEffect: {
            number: 1,
            scale: 8,
            brushType: "stroke",
          },
          itemStyle: {
            color: "#F56C6C",
          },
          data: [],
        },
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            symbolSize: 1,
            color: "#E4AA0C",
            symbol: "line",
          },
          lineStyle: {
            color: "#F56828",
            width: 0, // 线条宽度
            curveness: 0.3,
            type: "solid",
          },
          data: [],
        },
      ],
    }
    option.series[0].data = jsonData.features.map(function (item) {
      if (item.properties.name === "北京市") {
        return {
          label: { name: "" },
          value: [],
        };
      }
      return {
        label: { name: item.properties.name },
        value: item.properties.centroid,
      };
    });
    option.series[1].data = jsonData.features.map(function (item) {
      if (item.properties.name === "北京市") {
        return {
          label: { name: item.properties.name },
          value: item.properties.centroid,
        };
      }
    });
    option.series[2].data = jsonData.features.map(function (item) {
      return {
        coords: [
          item.properties.centroid ? item.properties.centroid : [], // 初始点经纬度
          [116.41995, 40.18994], // 目标点经纬度
        ],
        label: {
          start: item.properties.name,
          end: "北京",
        },
      };
    });
    option && myChart.setOption(option);
  </script>

</body>

</html>

js 对数据进行清洗

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports", "echarts"], factory);
  } else if (
    typeof exports === "object" &&
    typeof exports.nodeName !== "string"
  ) {
    factory(exports, require("echarts"));
  } else {
    factory({}, root.echarts);
  }
})(this, function (exports, echarts) {
  var log = function (msg) {
    if (typeof console !== "undefined") {
      console && console.error && console.error(msg);
    }
  };
  if (!echarts) {
    log("ECharts is not Loaded");
    return;
  }
  if (!echarts.registerMap) {
    log("ECharts Map is not loaded");
    return;
  }
  echarts.registerMap("china", {
    geoJSON: jsonData
  });
});