网站建设与开发专业,美御品牌推广,做网站书籍,做百度网站1. 配置Json文件
1.1 获得每个省份的json数据 打开 阿里云数据可视化平台 主页。 在搜索框中输入所需省份。 将json文件下载到本地。
1.2 将各省份的json数据进行融合
打开 geojson.io 主页 点击 open#xff0c;上传刚刚下载的 json 文件#xff0c;对多个省份不断…1. 配置Json文件
1.1 获得每个省份的json数据 打开 阿里云数据可视化平台 主页。 在搜索框中输入所需省份。 将json文件下载到本地。
1.2 将各省份的json数据进行融合
打开 geojson.io 主页 点击 open上传刚刚下载的 json 文件对多个省份不断上传 保存得到的整合省份json文件
2. 地区数据可视化
2.1 布局基本代码
打开 Echarts使用手册 拷贝以下代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html将所框部分代码删除 引入以下 js
script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script
script srchttps://cdn.jsdelivr.net/npm/jquery3.6.4/dist/jquery.min.js/script4. 将代码拷贝到以下图片位置中
myChart.showLoading();$.get(ROOT_PATH /data/asset/geo/HK.json, function (geoJson) {myChart.hideLoading();echarts.registerMap(HK, geoJson);myChart.setOption((option {title: {// 图的名称text: ,},visualMap: {// 数据的范围min: 800,max: 50000,text: [High, Low],realtime: false,calculable: true,// 区域颜色inRange: {color: [#E1F5FE, #B3E5FC, #4FC3F7, #03A9F4, #0288D1]}},series: [{type: map,map: HK,data: [{name: 中西区, value: 20057.34},],}]}));});2.2 修改配置代码
修改json路径改为刚刚整合的地区json文件路径 添加数据并根据数据范围修改visualMap属性中的max与min值 添加标题并修改其位置修改图例的位置
3. 效果图
