首页 > 其他分享 >Vue3使用VueEcharts实现图表

Vue3使用VueEcharts实现图表

时间:2024-08-21 19:24:36浏览次数:14  
标签:图表 const props return VueEcharts Vue3 import data

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

<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

相关文章

  • Vue3父子通信-setup+经典父组件与子组件el-dialog
    一、父组件绑定方法,引入子组件并传递数据和方法<el-buttonsize="small"plaintype="primary"@click="click_add_notice">+添加公告</el-button><AddNoticeDialogv-model="AddNoticeDialogDialogVisible"@addNoticeSucc......
  • vue3中script标签的setup实现原理
    概述当vue3新建组件时,我们有两种选择选项式和组合式,如下所示传统方式<script>import{ref}from"vue";exportdefault{setup(){constcount=ref(0);consthandleClick=()=>{count.value++;};return{count,handleClick......
  • Echarts 5 动态按需引入图表
    官网提供的按需引入方法为全量按需引入,在打包分离中,仍旧存在使用不到的图表被打包进去。例如:组件A使用了折线图、柱状图,组件B只用到了折线图,但是打包组件B的时候,柱状图也就被打包进去。本文提供一种动态按需引入的思路,使得只用到折线图的组件B,打包的时候只打包折线图,不会将组件A......
  • 2024-08-21 关于vue3中使用emit的一些笔记
    问题1:emitisnotdefinedwatch(()=>content.value,(val)=>{emit('input',val);});原因:直接使用了未定义的emit导致报错。解决方案:使用vue3中的defineEmits函数定义一个可以定义触发的函数,比如constemit=defineEmits(['input']);此处的emit只是一个变量,你可......
  • 038、Vue3+TypeScript基础,使用router.push进行路由跳转并传参
    01、main.js//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入路由importrouterfrom'./router'constapp=createApp(App);//使用路由app.use(router);//App.vue的根元素id为appapp......
  • vue3 响应式 API:watch()、watchEffect()
    watch()基本概念watch()用于监视响应式数据的变化,并在数据变化时执行相应的回调函数。可以监视单个响应式数据、多个响应式数据的组合,或者一个计算属性。返回值返回一个函数,调用这个函数可以停止监视。特点watch()默认是懒侦听的,即仅在侦听源发生变化时才执行回调函......
  • 037、Vue3+TypeScript基础,使用router.push进行导航式路由跳转
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入路由importrouterfrom'./router'constapp=createApp(App);//使用路由app.use(router);//App.vue的根元素id为ap......
  • 036、Vue3+TypeScript基础,路由中使用replace不让前进后退
    01、代码如下:<template><divclass="app"><h2class="title">App.Vue路由测试</h2><!--导航区--><divclass="navigate"><router-linkreplaceto="/Home"class="nav......
  • uni-app vue3 实现微信朋友圈和朋友分享功能
     1.新建share.jsexportdefault{data(){return{}},//1.配置发送给朋友onShareAppMessage(){return{title:'分享的标题',//分享的标题path:'pages/index',//点击分享链接之后进入的页面路径imageUrl:''//分享发......
  • vue3记录
    vue相关配置1、scss配置//安装命令npminstallsass-loadersass-D//vite.config.js文件css:{//css预处理器preprocessorOptions:{scss:{//引入mixin.scss这样就可以在全局中使用mixin.scss中预定义的变量了//给导入的路......