图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echarts.

1,确定你需要引入的echarts版本,官网地址:http://echarts.baidu.com/inde...
2,npm或者cnpm安装

 cnpm install echarts --save

3,按需引入。这里我强烈推荐按需引入,echarts图类型众多,我们一般不需要将每个图表都引入,这样也有利于减少打包体积,这里我建议将每一个echarts图封装成一个组件。
主要代码如下

<el-col :span='24'>
<v-charts></v-charts>
</el-col>

4组件部分源码

<template>
<div class="line">
<div class="main" ref="main">
</div>
</div>
</template>
<script>
let echarts = require('echarts/lib/echarts');//引入echarts
require('echarts/lib/chart/bar'); //引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title'); export default{
data(){
return{
myChart:{}
}
},
mounted(){
this.initEcharts();
},
methods:{
initEcharts(){
let THIS=this;
let mainDiv = THIS.$refs.main; //找到绘制的区域,强烈推荐使用refs
var myChart = echarts.init(mainDiv); //初始化
myChart.setOption({ //官网例子
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
<style lang='stylus' scoped>
.line
height 100%
.main
width:300px; //宽高也不可少
height:200px;
</style>

4实现效果如下

5,按需引入其他图表,可以参考可以按需引入的模块列表见 https://github.com/ecomfe/ech...

vue.js使用echarts一分钟简单入门的更多相关文章

  1. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. ECharts.js学习(一) 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  4. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  5. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  6. Vue.js的路由之——vue-router快速入门

    直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...

  7. 图表工具--- ECharts.js学习(一) 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  8. ECharts.js 超简单入门(本质canvas)

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  9. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

随机推荐

  1. JSP 定义行列数表单创建表格

    1.添加行数 .列数提交表单 <!doctype html> <html> <head> <title>setTable-发送表单</title& ...

  2. Jmeter接口自动化培训

    课程前提 速成班,讲的不会非常深,每个人基础不一样,但是实现接口自动化没有问题,因为jmeter更多的用来做性能测试.当然有兴趣我们也可以穿插一点 课程基本大纲 接口基础概念 部署本地测试环境(使用d ...

  3. Linux——文件打包与压缩

    Linux 下常见常用的压缩包文件格式有*.zip,*.rar,*.7z*.gz,*.xz,*.bz2,*.tar,*.tar.gz,*.tar.xz,*tar.bz2等后缀的压缩文件 文件后缀名 说 ...

  4. phpstudy开启PHPSocket扩展(windows系统)

    PHP开启Socket扩展 一.windows系统(本地电脑) 1.打开phpstudy,设置——>配置文件——>打开php.ini(我安装的是PhpStudy v8.0,其他版本请自己找 ...

  5. Linux libOpenThreads库链接冲突错误

    最近在linux 上安装了3.7.0版本的OpenSceneGraph,而在安装之前没有完全卸载之前安装的3.6.3版本,导致在编译程序链接时出现库引用冲突,在便以后出现以下警告信息: /usr/bi ...

  6. Spring学习(五)--构建Spring Web应用程序

    一.Spring MVC起步 看过猫和老鼠的小伙伴都可以想象Tom猫所制作的捕鼠器:它的目标 是发送一个小钢球,让它经过一系列稀奇古怪的装置,最后触发捕鼠 器.小钢球穿过各种复杂的配件,从一个斜坡上滚 ...

  7. MySQL-第三篇SQL语句基础(2)数据库约束

    1.数据库约束. 约束是在表上强制执行的数据校验规则,约束主要用于保证数据库里数据的完整性. MySQL使用information_schema数据库里的TABLE_CONSTRAINTS表来保存该数 ...

  8. kmp(最长前缀与后缀)

    http://acm.hdu.edu.cn/showproblem.php?pid=1358 Period Problem Description For each prefix of a given ...

  9. [51nod 1681]公共祖先(dfs序+线段树合并)

    [51nod 1681]公共祖先(dfs序+线段树合并) 题面 给出两棵n(n<=100000)个点的树,对于所有点对求它们在两棵树中公共的公共祖先数量之和. 如图,对于点对(2,4),它们在第 ...

  10. Word 中的橫式格式方程式和數學自動校正

    以橫式格式輸入方程式 您可以使用數學自動校正程式碼,迅速輸入大多數的方程式.例如,若要對齊方程式陣列,您可以使用 @ 和 &,如下所示: \eqarray(x+1&=2@1+2+3+y ...