vue3+TypeScript封装echarts5组件

亦凉 2021-09-07 06:17 1187阅读 0赞

[https://blog.csdn.net/qq\_38330707/article/details/111497853][https_blog.csdn.net_qq_38330707_article_details_111497853]

有用mark 等抽时间写个vue+TS+echarts5.0的组件文章

写个大概 带 resize的

<template>
      <div class="echarts" :id="id"></div>
    </template>
    
    <script lang="ts">
    import { defineComponent, onBeforeUnmount, onMounted } from 'vue';
    import * as echarts from 'echarts';
    
    export default defineComponent({
      name: 'TrendCharts',
      props: {
        options: {
          type: Object,
          default: () => ({}),
        },
      },
      setup(ctx) {
        const id = 'echarts-1';
        let chart: any = null;
    
        const initEcharts = () => {
          if (!chart) {
            const dom: any = document.getElementById(id);
            chart = echarts.init(dom);
          } else {
            return;
          }
          if (!ctx.options) return;
          chart.setOption(ctx.options);
        };
        const eventListener = () => {
          if (chart) {
            chart.resize();
          }
        };
        onMounted(() => {
          initEcharts();
          console.log('====YUSIR====================');
          console.log('window:', window);
          // debugger;
          window.addEventListener('resize', eventListener);
        });
    
        onBeforeUnmount(() => {
          window.removeEventListener('resize', eventListener);
        });
    
        return {
          id,
        };
      },
    });
    </script>
    
    <style lang="less" scoped>
    .echarts {
      width: 100%;
      height: 100%;
    }
    </style>

[https_blog.csdn.net_qq_38330707_article_details_111497853]: https://blog.csdn.net/qq_38330707/article/details/111497853

发表评论取消回复

表情：

评论列表（有 0 条评论，1187人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 集成echarts 图表组件

第一步：本项目本地安装echarts cnpm install echarts -D 第二步：全局配置：项目/main.js 文件 // 引入echarts impor

桃扇骨/ 2023年10月18日 16:33/ 0 赞/ 152 阅读

相关在vue下封装echarts公共组件的总结

这几天公司里边有一个项目，叫做日控制台，该项目是在webview下的一个webapp，使用vue构建，项目中要求使用许多自定义的图表。考察了许多图表组件之后，发现echarts

偏执的太偏执、/ 2023年09月24日 22:25/ 0 赞/ 94 阅读

相关 vue封装echarts组件

话不多说，先上代码。组件： <template> <div id="echartsItem" style

小鱼儿/ 2022年10月27日 02:56/ 0 赞/ 254 阅读

相关 Vue封装组件-面板3-LjPanel3

效果图： ![20210809162246703.png][] 使用： <LjPanel3 width="300px"

迷南。/ 2022年09月04日 00:52/ 0 赞/ 202 阅读

相关 Vue实战之封装组件echarts柱形图、折线图

封装一个echarts子组件，父组件可以多次调用封装一个柱形图。柱形图和折线图的区别在于series数据中的type的类型不同，柱形图的type为bar,折线图的t

刺骨的言语ヽ痛彻心扉/ 2022年05月19日 09:22/ 0 赞/ 417 阅读

相关 vue3+typescript项目开发（一）升级相关组件

使用vue2开发项目2年了，那个时候typescript还没有流行，一晃2年过去了，现在已经vue3+typescript大行其道了，所以打算还是把自己的项目升级一下。第一

偏执的太偏执、/ 2022年02月20日 00:29/ 0 赞/ 414 阅读

相关 vue实现四则运算封装组件

<template> <div> <el-row class="tableRowAlign"> <el-col :span="24"

你的名字/ 2021年09月27日 22:54/ 0 赞/ 612 阅读

相关 vue3+TypeScript封装echarts5组件

[https://blog.csdn.net/qq\_38330707/article/details/111497853][https_blog.csdn.net_qq

亦凉/ 2021年09月07日 06:17/ 0 赞/ 1188 阅读

相关 vue中封装echart

以下是模板，不同的echart需要替换option中的内容 LineChart.vue <template> <div :class="classNa

落日映苍穹つ/ 2021年07月26日 12:43/ 0 赞/ 480 阅读

相关 vue3+ts中使用echarts5.0

1. 安装 npm install echarts --save 1. 在要使用的页面引入 import as echarts from "echa

深藏阁楼爱情的钟/ 2021年07月26日 01:05/ 0 赞/ 1484 阅读