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

紫菀檀ss

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

阅读量784

点赞数

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

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

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/128903511

版权

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

一、效果图

请添加图片描述

二、全部代码

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