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. Redis系列三 - 缓存雪崩、击穿、穿透

    前言 从学校出来,做开发工作也有一定时间了,最近有想系统地进一步深入学习,但发现基础知识不够扎实,故此来回顾基础知识,进一步巩固.加深印象. 最初开始接触编程时,总是自己跌跌撞撞.不断摸索地去学习,再 ...

  2. 《深入理解 Java 虚拟机》读书笔记:虚拟机字节码执行引擎

    正文 执行引擎是 Java 虚拟机最核心的组成部分之一.在不同的虚拟机实现里,执行引擎在执行 Java 代码时可能会有解释执行(通过解释器执行)和编译执行(通过即时编译器产生本地代码执行)两种选择,也 ...

  3. vue--基础应用 全选

    1.用computed实现全选 <body> <div id="app"> <input type="checkbox" v-mo ...

  4. 关于beforeRouteEnter中的next()

    beforeRouteEnter(to,from, next){ console.log(this)   //undefined next(vm => { console.log(vm)}) } ...

  5. [BUG]excel复制到input含有不可见内容(零宽字符)

    现象 excel手机号复制到input框子, length长度和可见长度不一致. "‭176xxxx1115‬" 长度是 13 而不是 11. 原因 手机号前后被 excel 插入 ...

  6. 建议8:恰当选用if和switch

    相对来说下面几种情况更适合switch结构 枚举表达式的值.这种枚举是可以期望的,平行逻辑关系的 表达式的值具有离散性,不具有线性的非连续的区间值 表达式的值是固定的,不是动态变化的 表达式的值是有限 ...

  7. vue 模板 template init

    <template> <div> </div> </template> <script> export default { name: '模 ...

  8. tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案

    tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案 if (thi ...

  9. Natas24 Writeup(strcmp绕过漏洞)

    Natas24: 一个登录页面,查看源码,发现关键代码: if(array_key_exists("passwd",$_REQUEST)){ if(!strcmp($_REQUES ...

  10. Natas1 Writeup(查看页面源码)

    Natas2: 提示密码就在本页,但右键被禁用,可以使用F12或者抓包查看元素得到flag. flag:ZluruAthQk7Q2MqmDeTiUij2ZvWy2mBi 常用的查看源码方法:右键查看. ...