图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的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. 设计模式 - 装饰器模式(Decorator)

    简介 场景 通过继承和关联都可以给对象增加行为,区别如下: 继承是静态的(无法在程序运行时动态扩展),且作用于所有子类.硬编码,高耦合. 通过装饰器可以在运行时添加行为和属性到指定对象.关联关系就是在 ...

  2. Parameter Initializations in Deep Learning

    全零初始化的问题: 在Linear Regression中,常用的参数初始化方式是全零,因为在做Gradient Descent的时候,各个参数会在输入的各个分量维度上各自更新.更新公式为: 而在Ne ...

  3. Linux多线程服务器端编程

    目录 Linux多线程服务器端编程 线程安全的对象生命期管理 对象的销毁线程比较难 线程同步精要 借shared_ptr实现写时拷贝(copy-on-write) 多线程服务器的适用场合与常用编程模型 ...

  4. 通过queue实现前端的被动接收

    一般请求都是由前端主动发起请求,后端响应,但有些情况必须要后端达到一定条件了才向前端相应数据,这就变成前端被动了.比如微信接收信息,只有别人给你发消息,你才能被动接收消息. 最近做了个项目,当有人经过 ...

  5. Powershell read XML format config file

    upload.xml<?xml version="1.0" ?> <ftpConfig> <Protocol>ftp</Protocol& ...

  6. C++ STL map容器值为指针时怎么释放内存

    最近在使用STL中map时,遇到了一个问题,就是当map中值为指针对象时怎么释放内存? // 站点与TCP连接映射表 (key为ip_port_stationCode, value为 clientSo ...

  7. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  8. BZOJ 4821 (luogu 3707)(全网最简洁的代码实现之一)

    题面 传送门 分析 计算的部分其他博客已经写的很清楚了,本博客主要提供一个简洁的实现方法 尤其是pushdown函数写得很简洁 代码 #include<iostream> #include ...

  9. Codeforces Round #460 (Div. 2) B Perfect Number(二分+数位dp)

    题目传送门 B. Perfect Number time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  10. JavaScript中的反柯里化

    转载自:https://www.cnblogs.com/zztt/p/4152147.html 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函 ...