建设网站的软件下载,帝国cms能建设视频网站吗,上海网站建设的公司,网页设计师证书报考条件echarts地图的简单使用 文章说明核心源码效果展示源码下载 文章说明 主要介绍echarts地图组件的简单使用#xff0c;记录为文章#xff0c;供后续查阅使用 目前只是简单的示例#xff0c;然后还存在着一些小bug#xff0c;主要是首个Legend的点击会导致颜色全部不展示的问题… echarts地图的简单使用 文章说明核心源码效果展示源码下载 文章说明 主要介绍echarts地图组件的简单使用记录为文章供后续查阅使用 目前只是简单的示例然后还存在着一些小bug主要是首个Legend的点击会导致颜色全部不展示的问题以及世界地图的区域展示有一些小问题等待后续完善 核心源码 地图绘制组件 script setup
import * as echarts from echarts;
import china from /assets/china.json;
import world from /assets/world.json;
import {onBeforeMount, onMounted, reactive} from vue;
import {getAreaList} from /assets/getAreaList;
import {calculateColor} from /util;const data reactive({mapName: china,chinaAreaList: [],selectedChinaAreaList: [],worldAreaList: [],selectedWorldAreaList: [],
});onBeforeMount(() {const {chinaAreaList, worldAreaList} getAreaList();data.chinaAreaList chinaAreaList;data.worldAreaList worldAreaList;
});const mapList [{name: china,data: china,},{name: world,data: world,}
];let myChart;onMounted(() {for (let i 0; i mapList.length; i) {echarts.registerMap(mapList[i].name, mapList[i].data);}const chartDom document.getElementById(basic-chart);myChart echarts.init(chartDom);setOption();window.onresize () {myChart.resize();};
});const mapNameMap {china: 中国地图,world: 世界地图,
}let min 0;
let max 10000;
let selectedAreaDataList [];function setOption() {let selectedAreaList [];if (data.mapName china) {selectedAreaList data.selectedChinaAreaList;} else if (data.mapName world) {selectedAreaList data.selectedWorldAreaList;}const series [];const colors [];const notSortArray [];for (let i 0; i selectedAreaList.length; i) {let selectedAreaData;for (let j 0; j selectedAreaDataList.length; j) {if (selectedAreaDataList[j].name selectedAreaList[i]) {selectedAreaData selectedAreaDataList[j];break;}}let value;if (selectedAreaData) {value selectedAreaData.value;} else {value Math.ceil(Math.random() * max);selectedAreaDataList.push({value: value,name: selectedAreaList[i],});}notSortArray.push({value: value,name: selectedAreaList[i],});}notSortArray.sort(function (o1, o2) {return o1.value - o2.value;});if (!notSortArray.length) {colors.push(#ffffff, #000000);}const legendNames [];for (let i 0; i notSortArray.length; i) {const color calculateColor(notSortArray[i].value, min, max);colors.push(color);const seriesItem {name: notSortArray[i].name,type: map,geoIndex: 0,data: [{name: notSortArray[i].name,value: notSortArray[i].value}],color: color,};series.push(seriesItem);legendNames.push(notSortArray[i].name);}myChart.setOption({title: {text: mapNameMap[data.mapName],left: center,},geo: {map: data.mapName,label: {show: false,},},legend: {orient: vertical,bottom: 50px,left: 50px,itemHeight: 10,itemWidth: 30,textStyle: {fontSize: 12,rich: {a: {verticalAlign: middle,},},padding: [2, 0, 0, 0],},data: legendNames},series: series,visualMap: {left: right,min: min,max: max,inRange: {color: colors},text: [High, Low],calculable: true},toolbox: {show: true,feature: {saveAsImage: {show: true}}},}, true);
}
/scripttemplatediv classcontainerdiv styleheight: 6rem; display: flex; align-items: center; justify-content: centerel-select v-modeldata.mapName stylewidth: 10rem; margin-right: 2rem changesetOptionel-option label中国地图 valuechina/el-option label世界地图 valueworld//el-selectel-select v-showdata.mapName china v-modeldata.selectedChinaAreaList collapse-tagscollapse-tags-tooltip filterable multiple placeholder请选择地区 stylewidth: 30remchangesetOptiontemplate v-foritem in data.chinaAreaList :keyitem.idel-option :labelitem.name :valueitem.name//template/el-selectel-select v-showdata.mapName world v-modeldata.selectedWorldAreaList collapse-tagscollapse-tags-tooltip filterable multiple placeholder请选择地区 stylewidth: 30remchangesetOptiontemplate v-foritem in data.worldAreaList :keyitem.idel-option :labelitem.name :valueitem.name//template/el-select/divdiv styleflex: 1div idbasic-chart classchart/div/div/div
/templatestyle langscss
* {margin: 0;padding: 0;box-sizing: border-box;
}.container {width: 100vw;height: 100vh;display: flex;flex-direction: column;
}.chart {width: 100%;height: 100%;
}
/style根据值生成颜色的工具函数 function hsvToRgb(h, s, v) {const f n {const k (n h / 60) % 6;return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);};return [Math.round(f(5) * 255),Math.round(f(3) * 255),Math.round(f(1) * 255)];
}export function calculateColor(value, minValue, maxValue) {value Math.max(minValue, Math.min(maxValue, value));const factor (value - minValue) / (maxValue - minValue);const hue (factor * 360) % 360;const saturation 1 - factor;const valueV 1;const [r, g, b] hsvToRgb(hue, saturation, valueV);return rgb(${r}, ${g}, ${b});
}地图数据的下载可以在该网站下载较为全面的中国地图的数据DataV.GeoAtlas地理小工具系列 效果展示 中国地图 世界地图 源码下载 echarts地图组件的基本使用
