安装:
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. linux系统centOS7下搭建redis集群中ruby版本过低问题的解决方法

    问题描述: 在Centos7中,通过yum安装ruby的版本是2.0.0,但是如果有些应用需要高版本的ruby环境,比如2.2,2.3,2.4... 那就有点麻烦了,譬如:我准备使用redis官方给的 ...

  2. ArrayMap代码分析

    Java提供了HashMap,但是HashMap对于手机端而言,对内存的占用太大,所以Android提供了SparseArray和ArrayMap.二者都是基于二分查找,所以数据量大的时候,最坏效率会 ...

  3. Maven Archetype简介以及搭建

    为什么会写这篇文章,因为公司先在构建项目骨架都是用的 maven archetype ,身为一个上进的渣渣猿,自己还是有必要了解下这个东西的. Archetype介绍 Archetype 是一个 Ma ...

  4. js語句

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

  5. HTMl Dom操作

    訪問: getElementById():帶回指定id的所有元素 getElementByTagName():帶回指定標籤名的所有的元素 getElementByClassName():帶回指定類型名 ...

  6. Lodop窗口的按钮、权限,隐藏或设置功能不可用

    Lodop隐藏某个按钮或部分,具体参考Lodop技术手册 SET_SHOW_MODE篇.以下是几个例子,(对应下图图片): 第一种:LODOP.SET_SHOW_MODE ("HIDE_PB ...

  7. MyBatis:一对多关联查询

    MyBatis从入门到放弃四:一对多关联查询 前言 上篇学习了一对一关联查询,这篇我们学习一对多关联查询.一对多关联查询关键点则依然是配置resultMap,在resultMap中配置collecti ...

  8. ceph 性能测试

    我在物理机上创建了5台虚拟机,搭建了一个ceph集群,结构如图: 具体的安装步骤参考文档:http://docs.ceph.org.cn/start/ http://www.centoscn.com/ ...

  9. BZOJ2141排队——树状数组套权值线段树(带修改的主席树)

    题目描述 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家 乐和和.红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的身高有所区别 ...

  10. POJ3258-River Hopscotch-二分答案

    一条河里有一串石头,给出石头间的间距,让你去掉m个石头,使最短间距最大. 二分答案,对于每一种mid,判断要不要删除这块石头.然后逼近答案. #include <cstdio> #incl ...