Vue3中按需引入ECharts(一看就会)

这篇具有很好参考价值的文章主要介绍了Vue3中按需引入ECharts(一看就会)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用背景:比如做一个工程化项目,且只使用到柱状图和折线图,如果把所有的echarts组件都引入到项目中的话,会影响用户打开页面的速度和项目的性能。所以对于做一个高逼格的程序工程师,我们需要按需引入。

 1:废话不多说 老步骤安装

npm install echarts --save
 
有淘宝镜像的可以选择  (安装速度快)
cnpm install echarts --save

 2:自己新建一个 js 文件(名字随便起),这里我们就叫echarts.js,且放在专门放js的文件夹下。

3:echarts.js文件中的内容(必须有的)

// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表,图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
 
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
 
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
 
// 导出
export default echarts;

4:把自己创建好的echarts.js文件引入全局main.js中

import App from './App'
// 引入echarts
import echarts from './common/js/echarts.js'

import {createSSRApp} from 'vue'
let app = createSSRApp(App)
 
// 挂载到vue实例中
// Vue.prototype.$echarts = echarts;//vue2的挂载方式
app.config.globalProperties.$echarts = echarts;//vue3的挂载方式

export function createApp() {
	return {app}
}
 
//调用的时候就是 :  this.$echarts.init()

5:在页面中使用 (以下实例)

<template>
  <div>
    <div id="myEChartsBar"></div>
    <div id="myEChartsLine"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 基本柱形图
    changeBar() {
      const myEChart= this.$echarts.init(document.getElementById("myEChartsBar"));
      const option = {
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 27, 28, 25],
          },
        ],
      };
      myEChart.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    },
    // 折线图
    changeLine() {
      // 获取组件实例
      const myEChart= this.$echarts.init(document.getElementById("myEChartsLine"));
      // 设置配置项
      const option = {
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: "line",
            stack: "x",
          },
          {
            data: [5, 4, 3, 5, 10],
            type: "line",
            stack: "x",
          },
        ],
      };
      // 复制
      myEChart.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    },
  },
  mounted() {
    this.changeBar();
    this.changeLine();
  },
};
</script>
 
<style lang="scss" scoped>
#myEChartsBar {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#myEChartsLine {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
</style>

6:效果图如下 (成功了回来给我点个赞哈,客官)

vue3引入echarts,vue,js,前端开发,echarts,前端,javascript

7.这里需要注意(你想要按需引入的图表后缀都是Chart,开头就是官网上面的图例英文名,注意首字母要大写, 看下图) 

vue3引入echarts,vue,js,前端开发,echarts,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-566719.html

到了这里,关于Vue3中按需引入ECharts(一看就会)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 超详解“二分法查找”,一看就会!

    目录 一、 二分法概念用途 二、 超详思维图解 三、  超详使用方法实现代码运行操作 四、   总结 五、   结语 一:二分法概念用途  什么是二分法?有什么作用?一般用在何处? 概念: 二分查找法算法,也叫折半查找算法(对半处理会提高寻找目标数字的效率); 作用

    2024年02月07日
    浏览(66)
  • Windows下Apache安装步骤(一看就会)

    Apache HTTP Server (简称 Apache ) 是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展,将Perl/Python等解释器编译到服务器中。 下面本

    2024年02月02日
    浏览(52)
  • 创建JavaWeb简单项目(超级详细、一看就会)—— 1

    在编写我们这个简单的JavaWeb项目之前,我先来介绍一下本项目的项目环境。 本项目是基于JavaWeb的开发环境,具体使用了以下技术和工具: JavaWeb:JavaWeb是Java平台上的Web开发技术,它包括了Servlet、JSP、JavaBean、JDBC等技术。 Servlet:Servlet是JavaWeb中的一个组件,它可以接收HTT

    2024年02月08日
    浏览(72)
  • vs背景和主题设置(一看就会,简单实用)

    学习编程是个漫长的过程,设置一个自己喜欢的背景,可以使自己编写代码的时候更舒服。马上行动起来,设置一个自己喜欢的背景吧。 分享一下我自己的背景: 1)扩展—管理扩展 2)在搜索栏里输入:background—点击下载ClaudialDE—加载完毕后,退出vs,重新进入。 3)重新

    2024年02月12日
    浏览(53)
  • Linux部署docker(最详细docker,一看就会)

    一款产品:开发...测试..上线,三套环境! 例如:发布一个项目(jar+redis mysql jdk等),项目能不能带上环境安装一起打包 传统:java -- apk(应用)-- 发布(应用商店)--张三使用apk -- 下载安装即可使用 现在:java -- jar(环境)-- 打包项目带上环境(镜像)-- (docker仓库:商店

    2024年02月09日
    浏览(50)
  • (一看就会)Visual Studio2022安装配置详细教程

    目录 一、下载Visual Studio2022 1.打开visual studio官网 二、安装Visual Studio2022 加油!奥利给 官网地址:https://visualstudio.microsoft.com/zh-hans/ 进入到如下界面: 在当前界面向下滑动,选择箭头所指 community 2022 版本,点击下载: 下载完成后,打开下载文件所在文件夹,双击 VisualStudioSetu

    2024年02月08日
    浏览(59)
  • Jenkins中文设置教程:小白一看就会,详细步骤分享!

    本文详细介绍了如何在Jenkins中设置中文界面,包括点击管理Jenkins、管理插件、搜索并安装中文支持插件,以及将界面语言设置为简体中文的步骤,让您轻松上手!

    2024年02月14日
    浏览(63)
  • msf--Linux反弹shell--一看就会的实验

    环境如下 vps :Linux ubuntu 4.15.0-180-generic (已经打开8989端口) win:Windows Feature Experience Pack 120.2212.4180.0(可以随意) 靶机:Linux ubuntu 4.18.0-25-generic 过程如下 1.在vps里面生成木马  msfvenom -p linux/x86/meterpreter/reverse_tcp LHOST=xx.xx.xx.xx LPORT=8989 -f elf asd  2.将木马下载到本机桌面 sz a

    2023年04月13日
    浏览(53)
  • 如何将.ipynb文件转换成.py文件 一看就会

    1.打开cmd (快捷键 win+r ,在打开的窗口中输入cmd即可) 2.在弹出来的cmd窗口中输入:pip install jupyter notebook    然后等待下载安装。     这一步是jupyter notebook 的安装。 3.安装完成之后,在本cmd窗口继续输入:jupyter notebook,选择浏览器打开窗口即可。 4.在弹出来的网页中,点

    2024年02月11日
    浏览(38)
  • 【UE4】最简单的小地图制作,一看就会

    1、右键选择材质和纹理,新建一个渲染目标。 2、打开角色蓝图,添加场景捕获组件2D(SceneCaptureComponent2D),这时视口中会生成一个摄像机, 自由调整此摄像机以捕获不同的场景。选中此组件,在编辑器右边的场景捕获中,  将纹理目标选择为第一步所新建的渲染目标,将

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包