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