vue3+ts - 折线图和柱状图综合使用

紫菀檀ss

已于 2023-02-07 14:23:52 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js echarts typescript

于 2023-02-06 16:20:34 首次发布

本文链接：https://blog.youkuaiyun.com/LiaoFengJi/article/details/128903511

版权

本文介绍了如何在Vue3项目中结合TypeScript使用ECharts实现折线图和柱状图的综合效果。通过示例代码展示具体实现过程，适合需要在图表中同时展示柱状和折线数据的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期，在做项目的时候有涉及到柱状图和折线图共同放在一个图表里面的效果，所以在这里简单总结一下，有需要的朋友们可自行参考。

一、效果图

请添加图片描述

二、全部代码

<template>
  <div class="chart" id="participationEchart"></div>
</template>

<script setup lang="ts">
import {
    onMounted, inject, watch } from "vue";

const props = defineProps({
   
  xAxisList: {
   
    type: Array,
    default: [],
  },
  participationObj: {
   
    type: Object,
    default: {
   },
  },
  isRefres: {
    // 用于判断是否刷新页面
    type: Boolean,
    default: false
  }
});

type EChartsOption = echarts.EChartsOption;
const echarts: <