vue typescript 全局使用echarts

博客介绍了使用vue-cli3构建Vue+TypeScript项目的步骤,包括下载vue-cli3、创建项目、启动项目。还阐述了在项目中使用ECharts的方法,如下载依赖、创建相关文件、引入并设置为Vue属性等,最后欢迎大家指正问题。

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

构建项目

vue使用typescript 最好是利用 vue-cli3,使用教程网上较多。不过多赘述,一下是使用步骤:

  1. 下载vue-cli3
    npm/cnpm install -g @vue/cli;
  2. 创建vue项目
    vue create [myProject]
    提示:你可以选择默认选项,使用脚手架默认的插件和依赖,也可以手动选择;
  3. 启动项目
    npm run serve

使用echarts

  1. 下载依赖
npm/cnpm install echarts @types/echarts --save;
同时下载echarts 和 typescript 版的 echarts(@types/echarts)
复制代码
  1. 在项目根目录创建一个shims-echart.d.ts文件,贴入如下代码:
   import Vue from 'vue';

   declare module 'vue/types/vue' {
       interface Vue {
         $echarts: any
       }
   }
复制代码
  1. 在main.ts文件中引入echarts,并设置为vue的属性
    ...
    import Echart from 'echarts';
    Vue.prototype.$echarts = Echart;
    ...
复制代码
  1. 在组件中使用echarts
在组件类中定义一个公共变量$charts,类型跟shims-echart.d.ts中的一样
代码如下(option的代码省略,太长了,你们也不喜欢看,自己去官网找找):
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <div id="myEcharts" style="height: 400px;"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  public $echarts: any;
  private options: object = {
    ...
  };
  private mounted() {
    const ele = document.getElementById('myEcharts');
    const chart: any = this.$echarts.init(ele);
    chart.setOption(this.options);
  }
}
</script>
复制代码

效果图:

这是我自己捣鼓出来的一种用法,缺陷什么的还没考虑。如有问题,欢迎指正。如果大家喜欢,跪求一个赞;

转载于:https://juejin.im/post/5d073762e51d45109725fe7f

### Vue 3 中全局引入 ECharts 的方法 在 Vue 3 项目中,为了能够方便地在整个应用范围内使用 ECharts,在 `main.js` 或者 `main.ts` 文件里配置全局属性是一个常见的做法。然而需要注意的是,由于框架内部结构的变化,一些旧版本中的技巧可能不再适用。 #### 配置 main.js/main.ts 来设置全局变量 对于 JavaScriptTypeScript 用户来说,可以在项目的入口文件中完成初始化工作: ```javascript // 对于JavaScript用户而言 import { createApp } from 'vue'; import App from './App.vue'; import * as echarts from 'echarts'; const app = createApp(App); app.config.globalProperties.$echarts = echarts; app.mount('#app'); ``` ```typescript // 如果您正在使用TypeScript,则可以这样做 import { createApp, ConfigurableGlobalProperties } from 'vue'; import App from './App.vue'; import * as echarts from 'echarts/core'; declare module '@vue/runtime-core' { interface ComponentCustomProperties { $echarts: typeof echarts; } } const app = createApp(App); (app.config.globalProperties as unknown as ConfigurableGlobalProperties).$echarts = echarts; app.mount('#app'); ``` 这段代码确保了 `$echarts` 成员被正确添加到所有的组件实例上[^1]。 #### 使用 getCurrentInstance 访问 globalProperties 当尝试在一个基于 Composition API 构建的单文件组件 (SFC) 内部调用 ECharts 函数时,应当利用 `getCurrentInstance()` 方法来间接获取之前定义好的全局对象: ```javascript <script setup> import { ref, onMounted } from "vue"; import { getCurrentInstance } from "vue"; let myChart = null; onMounted(() => { const instance = getCurrentInstance(); if (!instance?.proxy?.$echarts) throw new Error('ECharts is not defined'); // 基于准备好的dom,初始化echarts实例 var chartDom = document.getElementById('main')!; myChart = instance.proxy.$echarts.init(chartDom); // 设置图表选项... }); </script> <template> <div id="main" style="width: 600px;height:400px;"></div> </template> ``` 此方式解决了直接通过 `this.` 尝试访问 `$echarts` 所带来的兼容性问题,并且遵循了最新的最佳实践指南[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值