feat:对接舆情监测相关接口
This commit is contained in:
@@ -20,8 +20,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import primary from '@/assets/images/item-1.png'
|
||||
import error from '@/assets/images/item-2.png'
|
||||
import primary from '@/assets/images/item-primary.png'
|
||||
import error from '@/assets/images/item-error.png'
|
||||
let loading = ref(true)
|
||||
let list = ref(0)
|
||||
onMounted(() => {
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
</div>
|
||||
<div class="count">
|
||||
<img class="bg" src="@/assets/images/mask-success.png" />
|
||||
<div class="flex align-center" :style="{ color }">
|
||||
<countup class="value" :end-val="count" />
|
||||
<span class="suffix">{{ suffix }}</span>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="count" :style="{ color: color }" />
|
||||
<span class="suffix" :style="{ color: color }">{{ suffix }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,20 +28,16 @@
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
let id = ref(guid())
|
||||
let pieChart = null
|
||||
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
|
||||
var title = ['企业', '农业', '工业', '纺织']
|
||||
var dataValue = ['15', '30', '35', '20']
|
||||
var dataList = title.map((item, index) => {
|
||||
return {
|
||||
name: item,
|
||||
value: dataValue[index]
|
||||
}
|
||||
})
|
||||
|
||||
var defaultCofig = {
|
||||
color: colorList,
|
||||
@@ -49,7 +45,7 @@
|
||||
orient: 'vertical',
|
||||
bottom: 'center',
|
||||
left: '70%',
|
||||
data: dataList,
|
||||
data: [],
|
||||
itemWidth: fitChartSize(16),
|
||||
itemHeight: fitChartSize(16),
|
||||
itemGap: fitChartSize(10),
|
||||
@@ -93,13 +89,15 @@
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
const init = () => {
|
||||
|
||||
const initChart = () => {
|
||||
const dom = document.getElementById(id.value)
|
||||
pieChart = echarts.init(dom)
|
||||
defaultCofig.series[0].data = props.dataList
|
||||
pieChart.setOption({
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
@@ -111,12 +109,20 @@
|
||||
if (pieChart) {
|
||||
pieChart.dispose()
|
||||
pieChart = null
|
||||
init()
|
||||
initChart()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
/*滚动数字设置*/
|
||||
.number-item {
|
||||
width: vw(40);
|
||||
height: vh(40);
|
||||
height: vw(40);
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
|
||||
Reference in New Issue
Block a user