这里以折线图为例,其他以此类推
编写折线图子组件
<script lang="ts" setup>
import { useDark } from '@vueuse/core'
import moment from 'moment'
import { computed } from 'vue'
import VueEcharts from 'vue-echarts'
const props = defineProps<{
data: {
t: Date
data: number
}[]
}>()
const isDark = useDark()
const chartTheme = computed(() => {
return isDark.value ? 'dark' : 'light'
})
const chartOption = computed(() => {
//处理数据获取x轴数据
const dateList = props.data.map(function (item) {
return moment(item.t).format('YYYY-MM-DD')
})
//处理数据获取图表数据
const valueList = props.data.map(function (item) {
return item.data
})
return {
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}
],
//信息窗体
tooltip: {
trigger: 'axis'
},
xAxis: [
{
data: dateList
}
],
yAxis: [{}],
//图表配置
series: [
{
type: 'line',
showSymbol: false,
data: valueList
}
]
}
})
//notMerge: true保证配置更新时图表不重复
//theme表示图表的主题
//option图表的配置项
//autoresize图标大小自适应
</script>
<template>
<VueEcharts
:update-options="{
notMerge: true
}"
:theme="chartTheme"
:option="chartOption"
autoresize
/>
</template>
父组件引入使用图表
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import axios from '@/request/interceptors'
import ComplaintCountChart from './ComplaintCountChart.vue'
import { regulatoryBodiesIdStore } from '@/stores/insuiList'
import { ElMessage } from 'element-plus'
const chartData = ref({
complaintOverviewChartData: {
names: [] as string[],
links: [] as any[]
},
complaintSourceTypeChartData: {},
complaintAcceptTypeChartData: {},
complaintCountChartData: []
})
onMounted(() => {
loadComplaintOverviewData()
})
//获取数据
function loadComplaintOverviewData() {
axios
.get(
`/api/public-opinion-tracking/complaint-overview/regulator/${regulatoryBodiesIdStore().regulatoryBodiesId}/complaint-overview-data`,
{
params: {
complaintTimeStart: props.timeRange.range[0],
complaintTimeEnd: props.timeRange.range[1]
}
}
)
.then((data: any) => {
if (data.errorcode === 0) {
chartData.value = data.data
} else {
ElMessage.error(data.message)
}
})
.catch((e) => {
if (e.response?.data?.message) {
ElMessage.error(e.response.data.message)
}
console.error(e)
})
}
</script>
<template>
<div >
<ComplaintCountChart :data="chartData.complaintCountChartData"></ComplaintCountChart>
</div>
</template>
<style scoped>
</style>
标签:图表,const,props,return,VueEcharts,Vue3,import,data
From: https://blog.csdn.net/weixin_72439307/article/details/141391065