forked from opentiny/tiny-vue
38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<tiny-chart-heatmap :data="chartData" :settings="chartSettings"></tiny-chart-heatmap>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref } from 'vue'
|
|
import { ChartHeatmap as TinyChartHeatmap } from '@opentiny/vue'
|
|
|
|
const chartData = ref({
|
|
columns: ['lat', 'lng'],
|
|
rows: [
|
|
{ lat: 120.14322240845, lng: 30.236064370321 },
|
|
{ lat: 120.14301682797, lng: 30.236035316745 },
|
|
{ lat: 120.14138577045, lng: 30.236113748704 },
|
|
{ lat: 120.1400398833, lng: 30.235973050702 },
|
|
{ lat: 120.13893453465, lng: 30.23517220446 },
|
|
{ lat: 120.1382899739, lng: 30.234062922977 },
|
|
{ lat: 120.13265960629, lng: 30.231641351722 },
|
|
{ lat: 120.13170681763, lng: 30.229925745619 },
|
|
{ lat: 120.13119614803, lng: 30.228996846637 },
|
|
{ lat: 120.13023980134, lng: 30.228226570416 }
|
|
]
|
|
})
|
|
// 地图热力图
|
|
const chartSettings = ref({
|
|
key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
|
|
url: 'https://api.map.baidu.com/api',
|
|
bmap: {
|
|
center: [120.14322240845, 30.236064370321],
|
|
zoom: 14,
|
|
roam: true
|
|
},
|
|
type: 'bmap'
|
|
})
|
|
</script>
|