简单的公司资料网站怎么做,seo网站结构,手机在线作图软件,年轻人必备的十大网站文章目录 #x1f4da;html和css#x1f4da;js#x1f407;整体框架#x1f407;getGeoJson#x1f407;echarts绘图⭐️整体框架⭐️option配置项 【echarts】渐变条形折线复合图【echarts】金字塔图
#x1f4da;html和css
html#xff1a;整合!DOCTYPE htmlhtml和cssjs整体框架getGeoJsonecharts绘图⭐️整体框架⭐️option配置项 【echarts】渐变条形折线复合图【echarts】金字塔图
html和css
html整合!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title可视化模板三/titlelink relstylesheet href./style.css
/head
bodydiv idtest1/div
/body
!-- echarts引入 --
script srchttps://cdn.staticfile.org/echarts/4.3.0/echarts.min.js/script
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js/script
script src./script.js/script
/htmlcss样式body{background-color: #f5f2e9;
}
#test1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 100vh;width: 100vw;
}js
整体框架
初始化地理信息可视化图表 使用 echarts.init初始化了一个 ECharts 图表。通过调用getGeoJson方法获取了所有地理坐标的 GeoJSON 数据和中国的 GeoJSON 数据。然后调用 initEcharts方法初始化 ECharts 图表。 let publicUrl https://geo.datav.aliyun.com/areas_v2/bound/;
async function initChart() {let chart echarts.init(document.getElementById(test1));//使用 await 等待获取地理坐标数据let alladcode await getGeoJson(all.json)let chinaGeoJson await getGeoJson(100000_full.json)initEcharts(chinaGeoJson, 唐朝历史人物分布, chart, alladcode)
}
initChart();async function 是 ECMAScript 2017ES8引入的语法特性之一用于简化异步操作的处理。通过使用 async function可以方便地编写和管理异步代码并且可以使用 await关键字轻松地处理 Promise 对象。在 JavaScript 中常见的异步操作包括处理异步函数、Promise 对象和其他需要等待操作的场景。使用传统的回调函数或 Promise 链式调用的方式来处理这些异步操作可能使得代码混乱、难以阅读和维护。定义一个异步函数时可以使用 async 关键字在函数声明之前如下所示async function myAsyncFunction() {// 异步操作逻辑
}在异步函数内可以使用 await 关键字等待一个 Promise 对象的解析并将其结果返回。await 关键字只能在声明为 async 的函数中使用它让 JavaScript 引擎暂停该函数的执行直到 Promise 对象状态变为 resolved已完成或 rejected已拒绝时再继续执行函数。
getGeoJson
该函数用于获取地图 JSON 数据。函数的参数是jsonName表示需要获取的地图数据的名称。使用 $.get 方法来发起异步请求获取地图数据。$.get(publicUrl jsonName) 返回的是一个 Promise 对象使用 await 关键字等待 Promise 对象的解析。//获取地图json数据
async function getGeoJson(jsonName) {return await $.get(publicUrl jsonName)
}echarts绘图
首先定义好地图数据即每个省份对应的数值let mapData [{name: 河南省,value: 14827},{name: 陕西省,value: 10333},...]function initEcharts(geoJson, name, chart, alladcode)geoJson地理信息数据的 GeoJSON 对象包含了地图的地理信息数据如各地区的边界坐标等。name地图的名称或标题用于在图表中显示地图的名称。chartECharts 图表实例用于初始化和展示地理信息可视化图表。alladcode地理坐标数据可能包含了各地区的经纬度信息。 以下细说initEcharts函数框架
⭐️整体框架
生成地理坐标映射表通过遍历 geoJson 对象的 features 属性获取了每个地区的名称及其经纬度信息并构建了地理坐标映射表 geoCoordMap。注册地图使用 echarts.registerMap 方法注册地图将地图名称和地理信息关联起来。定义图表的配置项option设置了地图的标题、提示框格式、地图区域样式、鼠标交互、series 属性设置了地图项设置颜色标注及色块指示。通过myChart.setOption将配置项应用到echarts实例。绑定事件处理函数myChart.resize以便让图表自适应新的窗口大小确保图表在不同尺寸的屏幕上能够正确显示。//生成地理坐标映射表
let geoCoordMap {};
let mapFeatures geoJson.features;
mapFeatures.forEach(function (v, i) {let name v.properties.name;if (name) {geoCoordMap[name] v.properties.center;}
});//注册地图
echarts.registerMap(name, geoJson);//定义图表配置项
var option {...};//将配置项应用到echarts实例
if (option typeof option object) {chart.setOption(option);
}//以让图表自适应新的窗口大小
window.addEventListener(resize, chart.resize);⭐️option配置项
标题及悬浮提示框关注提示框的样式设置相当于一个小型的html样式title: {text: name, // 设置标题文本为函数参数中所传递的地图名称left: center, // 标题水平居中top: 6%, // 标题距离顶部的距离为6%textStyle: {fontSize: 34, // 标题文字大小为34fontFamily: KaiTi, serif // 标题文字字体为楷体或Serif字体}
},
tooltip: {triggerOn: mousemove, // 触发方式为鼠标移动触发formatter: function (params) { // 自定义提示框的格式化函数if (isNaN(params.value)) { // 如果数值为非数字将其设置为0params.value 0}var html span params.name /spanbr/ // 构造提示框的HTML内容包括地区名称html span值 params.value /spanbr/ // 添加数值信息return html // 返回HTML内容作为提示框的显示内容},backgroundColor: rgba(29, 38, 71), // 设置提示框背景颜色extraCssText: box-shadow:0 0 4px rgba(11, 19, 43,0.8), // 为提示框添加额外的阴影效果
}geo地图配置 关注label标签设置及itemStyle地图基础样式设置这里的itemStyle主要是颜色设置指的是不考虑热力色块的地图初始颜色。normal普通状态及emphasis高亮状态。roam: false关闭鼠标缩放和平移漫游操作否则可通过鼠标拖动或滑轮滚动改变地图大小及位置。 geo: {show: true, // 设置地图显示为可见top: 10%, // 设置地图距离顶部的距离为10%map: name, // 指定使用的地图名称label: {normal: {show: false // 普通状态下地图标签不显示},emphasis: {show: true, // 高亮状态下地图标签显示color: #31322c, // 高亮状态下地图标签的颜色}},roam: false, // 关闭鼠标缩放和平移漫游操作itemStyle: {normal: {areaColor: #fff, // 地图区域的普通状态的背景颜色borderColor: #686a67, // 地图区域的普通状态的边框颜色},emphasis: {areaColor: #00828B, // 地图区域的高亮状态的背景颜色}},
}数据系列的配置配置了用于地图展示的系列series选项。 如果页面上有多个地理组件时比如多个地图或地图的放大缩小通过geoIndex可以指定当前系列要使用的地理组件的索引从而将该系列与指定的地理组件进行关联确保数据能够正确显示在指定的地图上。类似于yAxisIndex指定对应的y轴有时候可以是双y轴。当设置 animation: true 时表示开启了系列的动画。在图表加载或数据更新时系列会以动画的形式进行显示这种动态效果能够吸引用户的注意力使数据更加生动和直观。 series: [ {type: map, geoIndex: 0, //设置地图长宽比aspectScale: 0.75, animation: true, data: mapData },
]添加色块及图例框指示visualMap: {min: 0,max: 15000,// 设置颜色标注区分颜色范围完成颜色映射pieces: [{gt: 12000, color: #b0112f}, {gt: 10000, lte: 12000, color: #c34654}, {gt: 4000, lte: 10000, color: #ca5860}, {gt: 2000, lte: 4000, color: #df928a}, {gt: 1000, lte: 2000, color: #e3a89a}, {gt: 600, lte: 1000, color: #eabdaa}, {gt: 300, lte: 600, color: #f3dabc},{gt: 50, lte: 300, color: #f8ecd1},{gt: 1, lte: 50, color: #fcf9e5}],// 显示图例show: true,// 以下是图例框设置right: 65%,bottom: 12%,// 显示标签图例的textshowLabel: true,text: [High, Low],textStyle: {fontSize: 24,color: #333},//同上geoIndex: 0seriesIndex: [0],// 图例色块的宽高itemHeight: 20,itemWidth: 20,// 图例垂直排列且自动调整orient: vertical,align: auto,borderWidth: 2,borderColor: #ccc,}完整代码包
