准备:使用vue-cli脚手架

如果你已经有自己的项目,可以跳过这一步。

npm下载vue-cli脚手架

(写这篇文章时用的还是vue-cli2)

npm install -g @vue/cli

初始化一个项目

vue init webpack hello

然后等待它安装完所有的依赖包就可以了。

下面我们开始引入echarts。

方式一、直接引入echarts

先npm安装echarts

npm install echarts --save

开发:

main.js

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

myCharts.js

/**
* 各种画echarts图表的方法都封装在这里
* 注意:这里echarts没有采用按需引入的方式,只是为了方便学习
*/ import echarts from 'echarts'
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
//画一条简单的线
line1: function (id) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear(); const optionData = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}; this.chart.setOption(optionData);
},
}
}
}
})
} export default {
install
}

HelloWorld.vue

<template>
<div class="hello">
<div id="chart1"></div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted() {
this.$chart.line1('chart1');
}
}
</script> <style scoped>
#chart1 {
width: 300px;
height: 300px;
}
</style>

方式二、使用vue-echarts

先npm安装vue-echarts

npm install vue-echarts --save

开发:

除了全量引用echarts,我们还可以采用按需引入的方式

main.js

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

HelloWorld.vue

<template>
<div class="hello">
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
orgOptions: {},
}
},
mounted() {
this.orgOptions = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
}
}
</script>

VUE-CLI3.0安装和使用echart方法的更多相关文章

  1. VUE CLI3.0安装及配置

    # 安装 npm install -g @vue/cli # 查看已安装版本vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 ...

  2. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  3. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  4. 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)

    当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...

  5. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  6. vue cli3.0快速搭建项目详解(强烈推荐)

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  7. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  8. CentOS 7.0 安装配置LAMP服务器方法(Apache+PHP+MariaDB)(转)

    转自:http://www.jb51.net/os/188488.html 作者:佚名 字体:[增加 减小] 来源:osyunwei  准备篇: CentOS 7.0系统安装配置图解教程 http:/ ...

  9. CentOS 7.0 安装配置LAMP服务器方法(Apache+PHP+MariaDB)

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: #停止firewall服务 sys ...

随机推荐

  1. ios 双指捏合放大缩小图片的例子

    图片跟随双指捏合的距离放大或者缩小. 利用-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  实现. touchesMov ...

  2. linuxC动态内存泄漏追踪方法

    C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借有还才是好孩子).当你想找出内存泄露的地方时,有的投入海量的代码中,头痛不已.还好GNU C库提供了些 ...

  3. 毕业设计之感悟 —— UML 与 ER 图

    今天毕业设计答辩,虽然我第一个上场,但是不是特别紧张,因为整个系统都是我写的.我以为自己天衣无缝,能应付所有老师的所有问题.事实上,我被老师教育了一番. 老师说我,毕业论文中没有一个类.我一开始比较懵 ...

  4. SQL logic error or missing database no such table: xxx

    原文:SQL logic error or missing database no such table: xxx System.Data.SQLite.SQLiteException (0x8000 ...

  5. 创建hexo风格的markdown页面

    最近在用 nodejs 搭建一个个人博客,博客当然要有编辑文章的功能啦.个人比较偏爱 hexo 风格的 markdown 格式,所以想自己的博客也是这样的风格.尝试了几个库,发现 marked 的转换 ...

  6. 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II

    原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...

  7. Android之Log封装

    blog原文地址:http://yuxingxin.com/2015/10/26/AndroidLog/ Github:https://github.com/fallblank/CodeEssay

  8. 全部的Windows消息对应值

    以下是全部的Windows消息,   对于未在MSDN上的消息的WPARAM,   LPARAM参数解释正确的给分 [已知   :0x0313,   0x01e2,   0x01e5,   0x01e ...

  9. Python连载11-Python中os.path模块简介

    一.os.path(和路径相关的木块) 1.函数:abspath() (1)含义:将路径转化为绝对路径的形式(absolute path) (2)格式:os.path.abspath(相对路径) (3 ...

  10. JVM(六):探究类加载过程-下

    JVM(六):探究类加载过程-下 上文说了类加载过程的5个阶段,着重介绍了各个阶段做的工作.在本文中,我们对执行加载阶段的主体进行探讨,学习类加载器的模型和逻辑,以及我们该如何自定义一个类加载器. 定 ...