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
vue按需引入/全局引入echarts的更多相关文章
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...
- vue安装scss,并且全局引入
在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知道,每写一个.vue文件都要在st ...
- 【vue】——CDN或全局引入CSS、JS。
在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- vant库在vue全局引入toast组件
第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
随机推荐
- vue中eslint报错的解决方案
1,Newline required at end of file but not found. (eol-last) //文末需要一行 这个是报错: 这个是不报错的: 只需要在最后一行加上一空行即可 ...
- vector的初始化方式及用法笔记(不断更新)
vector的初始化方式 1)第一种,类似于数组的方式:vector<string> letter(3);letter[0] = "find";letter[1] = ...
- js中 navigator 对象
Navigator 对象包含有关浏览器的信息. 很多时候我们需要在判断网页所处的浏览器和平台,Navigator为我们提供了便利 Navigator常见的对象属性如下: 属性 描述 appCodeNa ...
- C++ 判断两个圆是否有交集
#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include <math.h> #include <easyx.h ...
- 【简说Python WEB】flask-mail电子邮件
目录 flask-mail flask shell发送邮件 系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境:virutalenv Python的版本:Python 3.6 ...
- redis相关命令及应用场景
Redis的应用场景 (1) 配合关系型数据库做高速缓存 l 高频次,热门访问的数据,降低数据库IO l 高频次,热门访问的数据,降低数据库IO (2) 由于其拥有 ...
- Python-时间戳、元组时间的格式、自定义时间格式之间的转换
一.时间戳.元组时间的格式.自定义时间格式之间的转换 1.下面是三者之间的转换关系: 2.代码如下: import time import datetime print(time.time()) #获 ...
- C# datagridview 格式化单元格内容
private void dgvBig_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e) { if (dgvB ...
- JDBC怎么连接数据库
1:注册驱动:class.forName("com.mysql.jdbc.Driver"); 2:连接数据库:DriverManager.getConnection(url , u ...
- 接口自动化框架pyface详细介绍
版权说明 本框架系本人结合一些实践经验和开源框架设计思想,在家基于兴趣爱好独立完成的代码开发. 源码只保存在私人电脑,办公电脑上无.github开源与公司无关,先把关系撇清,不涉及侵权. 嘘. 框架定 ...