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. python使用while循环实现九九乘法表

    a = 1while a <= 9: b = 1 while b <= a: print("%d*%d=%d\t" % (b, a, a * b), end=" ...

  2. php 防注入

    a. 打开magic_quotes_gpc或使用addslashes()函数 当php.ini里的 magic_quotes_gpc 为On 时. 提交的变量中所有的 ' (单引号), "  ...

  3. MyISAM 和 InnoDB

    1.MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不提供事务支持,而InnoDB提供事务支持已经外部键等高级 ...

  4. ajax3

    json json:JavaScript对象表示方法(JavaScript object notation) json:是存储和交换文本信息的语法,类似与xml.他使用键值对的方式来组织,易于人们阅读 ...

  5. kafka原理解析

    两张图读懂kafka应用: Kafka 中的术语 broker:中间的kafka cluster,存储消息,是由多个server组成的集群. topic:kafka给消息提供的分类方式.broker用 ...

  6. Open live Writer 直接发布wps文章,优点是可以带上图片

    官方网站: http://openlivewriter.org/ 博客园的设置里面的 MetaWeblog访问地址

  7. sql优化,如何将in换为exists

    原sql语句 -- 根据权限表查出该用户拥有的所有权限菜单 select * from tb_power where id in( select power_id from tb_role_power ...

  8. 使用new Image()可以针对单单请求,不要返回数据的情况

    使用new Image()可以针对单单请求,不要返回数据的情况,比如我这里写了一个Demo,请求百度的Logo一个示例: <html> <head> </head> ...

  9. Cisco 综合配置(三)

    要求: 1.PC1 PC2使用DHCP,获取IP ,VLAN为10 和20,网关在Core Switch 2上2.DHCP和web server VLAN为100,网关在Core Switch 1上3 ...

  10. React Native新项目启动报错'React/RCTBridgeDelegate.h' file not found

    React Native版本:0.60.4 解决方法: cd ios pod deintegrate pod install 然后重新启动就好了(示例页面变样了( ⊙ o ⊙ )) END------ ...