80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
|
<div class="select-box">
|
|
<Select v-model="params.id" label="选择景区" :options="options" @on-change="initChart" />
|
|
</div>
|
|
<div class="area" :id="id" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useEchart } from '@/hooks/echart'
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import { getAreaApi, getSpotApi } from '@/api/sentiment.js'
|
|
|
|
const { id, setOption } = useEchart()
|
|
|
|
let params = reactive({ id: '' })
|
|
let option = null
|
|
let options = ref([])
|
|
const initChart = async () => {
|
|
let res = await getAreaApi(params)
|
|
if (res.data.length > 0) {
|
|
if (option) {
|
|
option.series[0].data = res.data
|
|
} else {
|
|
option = {
|
|
legend: {
|
|
top: '10%',
|
|
itemWidth: fitChartSize(20),
|
|
itemHeight: fitChartSize(20),
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fitChartSize(20)
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['30%', '60%'],
|
|
center: ['50%', '56%'],
|
|
roseType: 'area',
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 1
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderRadius: fitChartSize(10)
|
|
},
|
|
data: res.data
|
|
}
|
|
]
|
|
}
|
|
}
|
|
setOption(option)
|
|
}
|
|
}
|
|
const getStop = async () => {
|
|
let res = await getSpotApi()
|
|
options.value = res.data
|
|
}
|
|
onMounted(() => {
|
|
getStop()
|
|
initChart()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-box {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: vh(10);
|
|
right: vw(10);
|
|
}
|
|
.area {
|
|
width: 100%;
|
|
height:80%;
|
|
}
|
|
</style>
|