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. Javascript中String()和new String()的区别——JS的包装对象

    最近在看Symbol不能使用new操作符,然后类比到Number,String,Boolean,因为它们同属于基本类型,但是有有所差异:Number,String,Boolean是可以使用new操作符 ...

  2. drf呼啦圈

    呼啦圈 1.1 表结构设计 不会经常变化的值放在内存:choices形式,避免跨表性能低. 分表:如果表中列太多/大量内容可以选择水平分表 表自关联 from django.db import mod ...

  3. js中的堆和栈

    http://www.jscwwd.com/article/5e533ae2552a8e2bf45d3d69 这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的 ...

  4. 高性能-GC

    带着问题去思考!大家好 相对.NET 来说.CLR去处理了,C,C++这些就需要手动去垃圾回收. GC大部分容易察觉的性能问题.其实很多问题实际是哪个都是由于对垃圾回收器的行为和预期结果理解有误.在, ...

  5. Python中常见的报错名称

    Python中常见的报错名称 1.SyntaxError 语法错误.看看是否用Python关键字命名变量,有没有使用中文符号,运算符.逻辑运算符等符号是不是使用不规范. 2.IndentationEr ...

  6. Multi-batch TMT reveals false positives, batch effects and missing values(解读人:胡丹丹)

    文献名:Multi-batch TMT reveals false positives, batch effects and missing values (多批次TMT定量方法中对假阳性率,批次效应 ...

  7. 【5min+】更好的选项实践。.Net Core中的IOptions

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  8. 微信开发+百度AI学习:微信网页开发环境搭建

    参考微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 两步即可获取微信网页开发能力 STEP1: ...

  9. 图解kubernetes控制器StatefulSet核心实现原理

    StatefulSet是k8s中有状态应用管理的标准实现,今天就一起来了解下其背后设计的场景与原理,从而了解其适用范围与场景 1. 基础概念 首先介绍有状态应用里面的需要考虑的一些基础的事情,然后在下 ...

  10. 图-搜索-DFS-51. N皇后

    2020-03-15 19:49:59 问题描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n ...