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的更多相关文章

  1. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  2. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  3. vue安装scss,并且全局引入

    在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知道,每写一个.vue文件都要在st ...

  4. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. vant库在vue全局引入toast组件

    第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...

  6. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

  7. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  8. 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常

    由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...

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

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

随机推荐

  1. 【已解决】HDFS节点已经启动,但不能访问50070 ?

    问题描述 通过start-dfs.sh启动了三个节点 但无法通过IP访问50070端口 问题分析 1.可能是防火墙没关,被拦截了 果然,防火墙没关 再将防火墙设为开机不启动 systemctl dis ...

  2. utuntu sever1804显示中文putty可以输入中文

    默认情况下,putty连接ubuntu server以后,哪怕设置的Utf-8的连接,也是无法显示中文的. 应该是ubuntu服务器端,没有字库的问题. 如果在putty显示和输入中文呢,因为配置信息 ...

  3. linux firewalld 防火墙操作命令

    查看防火墙的状态systemctl status firewalldTomcat默认使用8080端口,如果防火墙开启,需要开通8080端口firewall-cmd --zone=public --ad ...

  4. guava限流器RateLimiter原理及源码分析

    前言 RateLimiter是基于令牌桶算法实现的一个多线程限流器,它可以将请求均匀的进行处理,当然他并不是一个分布式限流器,只是对单机进行限流.它可以应用在定时拉取接口数据, 预防单机过大流量使用. ...

  5. tersserorc的简单使用

    tesserocr 是 python 的一个 OCR 库,它是对 tesseract 做的一层 Python API 封装,所以他的核心是tesseract. tesseract 的安装见 https ...

  6. Wireshark过滤器写法总结

    目录 #Wireshark提供了两种过滤器: 1.捕获过滤器 2.显示过滤器 #过滤器具体写法 #显示过滤器写法 #捕捉过滤器写法 #Wireshark提供了两种过滤器: 1.捕获过滤器 捕获过滤器: ...

  7. 使用PageHelper插件分页时,如何对对象进行转换以及添加属性

    一.插件介绍 PageHelper是针对Mybaits的分页插件,支持任何复杂的单表.多表分页. 二.基本用法 以springboot为例,有两种方式配置,一种是传统的,引入依赖,编写配置类:一种是使 ...

  8. express第三方中间件研究之bodyParser中间件

    转载至:http://www.cnblogs.com/lianer/p/5178693.html 接触nodejs已有一段时间了,但最近才开始落实项目,于是使用express应用生成器生成了一个应用. ...

  9. Gitblit无法查看单个文件解决方案

    一个简单的解决方案是在reference.properties中设置: web.mountParameters = false 在这种情况下,您完全避免了该问题,因为项目名称,分支和文件名作为查询字符 ...

  10. Mol Cell Proteomics. | 粪便微生物蛋白质的组成与饮食诱导肥胖倾向的关联研究

    题目:Associations of the Fecal Microbial Proteome Composition and Proneness to Diet-induced Obesity 期刊 ...