Vue3使用VueEcharts实现图表

这里以折线图为例，其他以此类推
编写折线图子组件
 

<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: Datedata: 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>