首页 前端知识 vue3中按需引入echarts

vue3中按需引入echarts

2024-08-10 22:08:49 前端知识 前端哥 183 504 我要收藏

之前对vue的使用版本都是vue2以及js,现在用vue3和typescript练练手,记录一下如何在vue3中以按需引入的方式引入echarts。

(1)安装echarts

npm install echarts --save

(2)在项目中新成立一个charts.ts文件,将所需要引用的组件暴露出来,在main.ts中引入,然后以provide(inject)的方式将echarts提供给组件

在这里插入图片描述
main.ts

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import store from '@/store/store';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import echarts from '@/utils/charts';
import router from './router';
import App from './App.vue';

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus).use(router).use(store)
  .mount('#app');

app.provide('$echarts', echarts);

(3)在组件中使用

<template>
  <div id="chartcontainer">这是图标集合页面</div>
</template>

<script lang="ts" setup>
import {
  reactive, ref, defineComponent, inject, onMounted,
} from 'vue';

const echarts = inject('$echarts');=
onMounted(() => {
  const myChart = (echarts as any).init(document.getElementById('chartcontainer'));
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
});

</script>

<style lang="scss" scoped>
#chartcontainer {
  width:800px;
  height: 600px;
}
</style>

如下图所示:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15232.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!