vue按需引入/全局引入echarts

npm install echarts -S

  

1.按需引入

新建echarts.js公共引入

// 文件路径 @/lib/echarts.js 自行配置

 // 加载echarts,注意引入文件的路径
 import echarts from ‘echarts/lib/echarts‘

 // 再引入你需要使用的图表类型,标题,提示信息等
 import ‘echarts/lib/chart/bar‘
 import ‘echarts/lib/component/legend‘
 import ‘echarts/lib/component/title‘
 import ‘echarts/lib/component/tooltip‘

 export default echarts

  在echart.vue文件引入echarts.js文件

<template>
  <div class="about">
    <!-- <h2>This is an aboutEchart page</h2> -->
    <div id="myChart" ref="myChart"></div>
  </div>
</template>
<script>
import echarts from ‘@/common/echarts‘

2.全局引入echarts

 

在main.js中

// 引入echarts
import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts

原文地址:https://www.cnblogs.com/xzybk/p/12573279.html

时间: 2024-10-28 07:49:20

vue按需引入/全局引入echarts的相关文章

vue填坑之全局引入less,scss,styl文件

每次全局引入less文件都是心累的旅程,木有一次能正常启动的,啊,好在最后都解决了,但是原理,本姑娘还是不懂 以全局引入less文件为例 首先安装less的依赖包 用的cnpm install 淘宝镜像文件下载,npm install -g cnpm --registry=https://registry.npm.taobao.org(全局安装) 用build文件下的webpack.base.conf.js里配置less的依赖 { test: /\.less$/, loader: 'style-

vue安装scss,并且全局引入

在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦.css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法. 1. npm install node-sass --save-dev npm install sass-loader

vue按需引入echarts

下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入组件 缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验 二.按需引入 如果是在许多页面中都有用到,就写在main.js中 //引入基本模板 let echart

Vue全局引入JS的方法

两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中通过如下方式引入即可: <script src="src/models/my.js"></script> 2. js为 ES6 模块化写法时,即 import,export形式,如下: var fun=function(){ console.log('hello')

vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './assets/css.css' src/assets/scss.scss $border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; } 第一步:安装依赖 cnpm install node-sass --sa

在vue项目中正确的引入jquery

<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改. dependencies:{ "jquery":"^2.2.3" } 然后在命令行中cnpm install install jquery --save-dev

webpack全局引入jquery的方法

全局引入jquery后,就能使用jquery的API和插件了,网上有好几种方法,这里推荐'expose-loader'这种方法,包括以下两部: 1.配置webpack.config.js文件.下图红框中的 test 是匹配jquery的路径,loader 是将jquery作为window.jQuery 和 window.$ 暴露到全局. 2.在需要导入的模块中(比如 index.js)正确导入:见下图

vue中的图标字体引入

网址:https://icomoon.io/app/#/select: 特点:样式多,免费 操作: 1.相中的,随便点,不要钱,generat fonts然后download,得到一个压缩文件,解压 2,把style.css放到vue的static里,把font放到asetes里(当然你也可以放在别的地方,只要vue里就可以). 3,在需要用图标的vue文件的style里引入css文件:@import    ./路径style.css(别忘记改一下style.css里的font路径,否则报错,如

在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置

按需加载需要的包  babel-plugin-import    装饰器语法需要的包  @babel/plugin-proposal-decorators dva框架 将.webpackrc  改成.webpackrc.js然后具体配置 const config = {}; config.proxy = { "/api": { "target": "http://localhost:7001", "changeOrigin":