企業(yè)網(wǎng)站建設(shè)推薦興田德潤app推廣的常用方法
文章目錄
- @[TOC](文章目錄)
- 前言
- 一、基本地圖展示
- 2.數(shù)據(jù)可視化
- 總結(jié)
文章目錄
- @[TOC](文章目錄)
- 前言
- 一、基本地圖展示
- 2.數(shù)據(jù)可視化
- 總結(jié)
前言
最近工作安排使用echarts來制作圖形報表，記錄一下我的步驟，需求呈現(xiàn)一個地圖，地圖顯示標(biāo)簽，根據(jù)業(yè)務(wù)指標(biāo)值給地圖不同省市填充不同顏色，鼠標(biāo)放上提示更多內(nèi)容。
一、基本地圖展示
ECharts 可以使用 GeoJSON 格式的數(shù)據(jù)作為地圖的輪廓，可以獲取第三方的 GeoJSON 數(shù)據(jù)注冊到 ECharts 中：
https://echarts.apache.org/zh/index.html
https://github.com/echarts-maps/echarts-china-cities-js/tree/master/js/shape-with-internal-borders
https://datav.aliyun.com/portal/school/atlas/area_selector
ECharts繪制地圖步驟
1.拿到GeoJSON數(shù)據(jù)
2.注冊對應(yīng)的地圖的GeoJSON數(shù)據(jù)（調(diào)用setOption前注冊）
3.配置geo選項。
<!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>Document</title></head><body><div id="main" style="height: 400px"></div><script src="../libs/echarts-5.3.3.js"></script><!-- 1.導(dǎo)入了一個中國的 geo jsonwindow.china_geojson = {}--><script src="./geojson/china_geojson.js"></script><script>window.onload = function() {// 2.注冊一下中國地圖的 geo json ( 需要在setOption之前調(diào)用 )echarts.registerMap('中國', { geoJSON: china_geojson })let myChart = echarts.init(document.getElementById('main'));let option = {// 3.在 echarts 中展示中國地圖geo: {map: '中國'},};myChart.setOption(option);}</script></body></html>
2.數(shù)據(jù)可視化
給地圖添加數(shù)據(jù)，并可視化展示
添加一個map series
配置地圖樣式
添加地圖所需的數(shù)據(jù)
添加 visualMap 視覺映射
<!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>Document</title><style></style></head><body><div id="main" style="height: 600px"></div><script src="../libs/echarts-5.3.3.js"></script><script src="./geojson/china_geojson.js"></script><script>// 注冊地圖echarts.registerMap("中國", { geoJSON: china_geojson });// 1.基于準(zhǔn)備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById("main"), null, {renderer: "svg",});var data = [{ name: "北京", value: 199 },{ name: "天津", value: 42 },{ name: "河北", value: 102 },{ name: "山西", value: 81 },{ name: "內(nèi)蒙古", value: 47 },{ name: "遼寧", value: 67 },{ name: "吉林", value: 82 },{ name: "黑龍江", value: 123 },{ name: "上海", value: 24 },{ name: "江蘇", value: 92 },{ name: "浙江", value: 114 },{ name: "安徽", value: 109 },{ name: "福建", value: 116 },{ name: "江西", value: 91 },{ name: "山東", value: 119 },{ name: "河南", value: 137 },{ name: "湖北", value: 116 },{ name: "湖南", value: 114 },{ name: "重慶", value: 91 },{ name: "四川", value: 125 },{ name: "貴州", value: 62 },{ name: "云南", value: 83 },{ name: "西藏", value: 9 },{ name: "陜西", value: 80 },{ name: "甘肅", value: 56 },{ name: "青海", value: 10 },{ name: "寧夏", value: 18 },{ name: "新疆", value: 180 },{ name: "廣東", value: 123 },{ name: "廣西", value: 59 },{ name: "海南", value: 14 },];// 2.指定圖表的配置項和數(shù)據(jù)var option = {tooltip: {},grid: {},// 1.視覺數(shù)據(jù)映射visualMap: [{// type: "continuous", // 連續(xù)型視覺映射組件 (默認(rèn))// type: "piecewise", // 分段型視覺映射組件left: "20%",seriesIndex: [0], // 指定取哪個系列的數(shù)據(jù)// 定義 在選中范圍中 的視覺元素, 對象類型。inRange: {color: ["#04387b", "#467bc0"], // 映射組件和地圖的顏色(一般和地圖色相近)},},],series: [{name: "中國地圖",type: "map",map: "中國",data,// data: [// { name: "廣東", value: 123 },// { name: "廣西", value: 59 },// { name: "海南", value: 14 },// // ....// // ...// ],itemStyle: {areaColor: "#023677",borderColor: "#1180c7",},emphasis: {itemStyle: { areaColor: "#4499d0" },label: { color: "white" },},select: {label: { color: "white" },itemStyle: { areaColor: "#4499d0" },},},],};myChart.setOption(option);</script></body></html>
總結(jié)
以上就是echarts地圖的簡單運用，更多功能配置參考官方文檔/