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

文章目录

- 作品简介
- - - 项目实现了以下核心功能：
- 技术架构
- - - 前端架构
  - 实现过程
- 项目代码
- - - html 部分
    - js 对数据进行清洗
  - 效果展示

作品简介

本项目是借助腾讯云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});
});