安装:
cnpm install echarts -S (安装依赖并引入到 package.json)

官网安装说明:http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

按需引入,以加快打开速度:

按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
var drawLine = this.drawLine();
window.onresize = function temp() {
drawLine.resize(); //重绘,窗口大小改动时
};
  },
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [, , , , , ]
}]
});
    return myChart; } } }

这里参考

百度ECHARTS官网及文档:http://echarts.baidu.com/

参考:http://blog.csdn.net/mr_wuch/article/details/70225364

简单易懂直接收集看吧

.

vue项目中安装使用echarts的更多相关文章

  1. vue 项目中安装npm--save-dev 和 --save 命令

    在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...

  2. 在vue项目中安装使用Mint-UI

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性:       使用文档: http://mint-ui.github.io/#!/zh-cn Mi ...

  3. vue项目中安装使用vux

    vux是个vue的移动端框架. 目前移动端UI框架这么多,为啥选择vux呢?vux虽然说是个个人维护项目,但是有15000+个star,应该不比其他的团队开源框架差. 最重要的是,目前要做微信公众号和 ...

  4. vue项目中安装cnpm和node_modules

    1.安装cnpm的nodejs包管理工具,命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org   2. 每个vue项 ...

  5. 解决:vue项目中多个echarts图表只有最后一个随浏览器变化改变大小

    window.onresize = () => { this.initChart()} 改为 window.addEventListener('resize', () => { this. ...

  6. vue系列---vue项目(已安装vuex)中引入jquery

    vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

  7. 前台框架vue.js中怎样嵌入 Echarts 组件?

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

  8. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  9. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. js語句

    js語句就是告訴瀏覽器要做什麼: js代碼就是js語句序列: js代碼塊就是{}包括的,函數就是一個代碼塊的典型例子: js注釋:單行注釋://,多行注釋:/**/ js對大小寫敏感: js語句可以不 ...

  2. python之count()函数

    # count()统计字符串中特定单词或短语出现次数(n = 3) strs = 'Good! Today is good day! Good job!' n = strs.lower().count ...

  3. Lodop代码设置打印机等信息后 设置预览可重选

    Lodop打印控件默认在代码里指定了打印.纸张.纸张方向.份数等信息,在预览的界面的设置里是无法重新选择的,默认是禁止重选的,如果重选会提示,例如:“打印方向”已由程序控制,无法改变!“纸张大小”已由 ...

  4. 机器学习--Logistic回归

    logistic回归 很多时候我们需要基于一些样本数据去预测某个事件是否发生,如预测某事件成功与失败,某人当选总统是否成功等. 这个时候我们希望得到的结果是 bool型的,即 true or fals ...

  5. BZOJ5010 FJOI2017矩阵填数(容斥原理)

    如果只考虑某个子矩阵的话,其最大值为v的方案数显然是vsize-(v-1)size.问题在于处理子矩阵间的交叉情况. 如果两个交叉的子矩阵所要求的最大值不同,可以直接把交叉部分划给所要求的最大值较小的 ...

  6. Jquery 行选中背景色

    直接上代码: 懒得以后网上在查了,拷贝直接可用 Style: .tbSelectCss { background-color:#d5f4fe; } Html: <table name=" ...

  7. day28 classmethod 装饰器

    类方法装饰类方法 把一个方法变成类中的方法 之后调用此方法不需要对类实例化后在调用 直接通过类.方法即可调用 class Goods: __discount = 0.5 def __init__(se ...

  8. java监控工具VisualVM

    java监控工具VisualVM https://visualvm.github.io/ https://visualvm.github.io/documentation.html https://h ...

  9. 在Java Web程序中使用监听器可以通过以下两种方法

    之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...

  10. luogu4267 TamingtheHerd (dp)

    设f[i][j]为让前i天发生j次暴动需要改变的最少的值 则f[i][j]=min{f[k][j-1]+(x[k+1]!=0)+(x[k+2]!=1)+...+(x[i]!=(i-k-1))} $O( ...