CSS 与 地图可视化 雷达效果篇 (六)

地图可视化来到Css 篇章了,这次一口气是兼容了7个地图引擎, 这次直接上包应用
类库兼容地图引擎有

mapbox
maptalks
arcgis 4
leaflet
openlayer
高德地图
百度地图
在线安装

npmi @haibalai/gismap4-css

如果是react 项目可以不用安装react, react-dom
非react 脚手架需要额外安装,因为本类库使用Css in js 的思想

npm i react react-dom

其中map 对象 针对不同地图引擎 可以放入不同的实例对象自动适应

mapbox 放入mapbox new 实例化的map对象
maptalks 放入maptalks new 实例化的map对象
arcgis 4 放入arcgis new 实例化的 MapView 或者 SceneView 对象
leaflet 放入leaflet new 实例化的map对象
openlayer 放入openlayer new 实例化的map对象
高德地图 放入高德地图 new 实例化的map对象
百度地图 放入百度地图 new 实例化的map对象
初始化

let allKindsData = [
{
geometry: [114.0173554, 22.6543179],
attributes: {
name: “3号圆”
}
},
{
geometry: [113.8054826, 22.7357998],
attributes: {
name: “4号圆”
}
},
];
let option = {
renderer: {
type: “simple”,
symbol: {
borderColor: “rgba(108,244,102,0.6)”,
CSS 与 地图可视化 雷达效果篇 (六) - 小专栏

要画网页雷达图,可以使用一些数据可视化工具,如ECharts、D3.js等。以下是使用ECharts绘制网页雷达图的全过程: 1.准备数据 网页雷达图通常用于比较多个指标的值,因此需要准备每个指标对应的数值。例如,我们要绘制一个五维雷达图,每个维度对应的指标分别为A、B、C、D、E,对应的数值为10、20、30、40、50。 2.安装ECharts ECharts是一个基于JavaScript的数据可视化库,可以通过npm安装,也可以直接下载源代码。 3.创建HTML页面 在HTML页面中引入ECharts的JS文件和CSS文件,并且创建一个div元素作为雷达图的容器: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页雷达图</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css"> </head> <body> <div id="radar-chart" style="width: 600px; height: 400px;"></div> </body> </html> ``` 4.配置ECharts 使用ECharts绘制雷达图需要配置一些参数,包括图表类型、数据、坐标轴等。以下是一个简单的配置示例: ```javascript var myChart = echarts.init(document.getElementById('radar-chart')); var option = { title: { text: '网页雷达图' }, tooltip: {}, legend: { data: ['数据'] }, radar: { name: { textStyle: { color: '#000' } }, indicator: [ { name: 'A', max: 100 }, { name: 'B', max: 100 }, { name: 'C', max: 100 }, { name: 'D', max: 100 }, { name: 'E', max: 100 } ] }, series: [{ name: '数据', type: 'radar', data: [ { value: [10, 20, 30, 40, 50] } ] }] }; myChart.setOption(option); ``` 上述代码中,使用`echarts.init()`方法创建一个ECharts实例,然后定义一个`option`对象,该对象包含雷达图的各个配置参数。其中,`title`用于设置标题,`tooltip`用于设置提示框,`legend`用于设置图例,`radar`用于设置雷达图的坐标轴,`indicator`用于设置每个维度对应的指标名称和最大值,`series`用于设置雷达图的数据,包括每个维度对应的数值。 5.绘制雷达图 使用`setOption()`方法将配置参数应用到ECharts实例中,即可绘制出网页雷达图。 完整的HTML页面代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页雷达图</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css"> </head> <body> <div id="radar-chart" style="width: 600px; height: 400px;"></div> <script> var myChart = echarts.init(document.getElementById('radar-chart')); var option = { title: { text: '网页雷达图' }, tooltip: {}, legend: { data: ['数据'] }, radar: { name: { textStyle: { color: '#000' } }, indicator: [ { name: 'A', max: 100 }, { name: 'B', max: 100 }, { name: 'C', max: 100 }, { name: 'D', max: 100 }, { name: 'E', max: 100 } ] }, series: [{ name: '数据', type: 'radar', data: [ { value: [10, 20, 30, 40, 50] } ] }] }; myChart.setOption(option); </script> </body> </html> ``` 运行该页面即可看到绘制出的网页雷达图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值