学校安全教育网站建设,wordpress 调用分类名称,新手做外贸怎么学,凡客诚品官网app文章目录 [TOC](文章目录) 前言一、基本地图展示2.数据可视化 总结 前言
最近工作安排使用echarts来制作图形报表#xff0c;记录一下我的步骤#xff0c;需求呈现一个地图#xff0c;地图显示标签#xff0c;根据业务指标值给地图不同省市填充不同颜色#xff0c;鼠标放… 文章目录 [TOC](文章目录) 前言一、基本地图展示2.数据可视化 总结
前言
最近工作安排使用echarts来制作图形报表记录一下我的步骤需求呈现一个地图地图显示标签根据业务指标值给地图不同省市填充不同颜色鼠标放上提示更多内容。 一、基本地图展示
ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓可以获取第三方的 GeoJSON 数据注册到 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数据 2.注册对应的地图的GeoJSON数据调用setOption前注册 3.配置geo选项。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodydiv idmain styleheight: 400px/divscript src../libs/echarts-5.3.3.js/script!-- 1.导入了一个中国的 geo jsonwindow.china_geojson {}--script src./geojson/china_geojson.js/scriptscriptwindow.onload function() {// 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )echarts.registerMap(中国, { geoJSON: china_geojson })let myChart echarts.init(document.getElementById(main));let option {// 3.在 echarts 中展示中国地图geo: {map: 中国},};myChart.setOption(option);}/script/body/html2.数据可视化
给地图添加数据并可视化展示 添加一个map series 配置地图样式 添加地图所需的数据 添加 visualMap 视觉映射
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle/style/headbodydiv idmain styleheight: 600px/divscript src../libs/echarts-5.3.3.js/scriptscript src./geojson/china_geojson.js/scriptscript// 注册地图echarts.registerMap(中国, { geoJSON: china_geojson });// 1.基于准备好的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: 内蒙古, 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.指定图表的配置项和数据var option {tooltip: {},grid: {},// 1.视觉数据映射visualMap: [{// type: continuous, // 连续型视觉映射组件 (默认)// type: piecewise, // 分段型视觉映射组件left: 20%,seriesIndex: [0], // 指定取哪个系列的数据// 定义 在选中范围中 的视觉元素, 对象类型。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 总结
以上就是echarts地图的简单运用更多功能配置参考官方文档/
