vue.js使用echarts一分钟简单入门
图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的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一分钟简单入门的更多相关文章
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- ECharts.js学习(一) 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- Vue.js的路由之——vue-router快速入门
直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...
- 图表工具--- ECharts.js学习(一) 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- ECharts.js 超简单入门(本质canvas)
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
随机推荐
- 设计模式 - 装饰器模式(Decorator)
简介 场景 通过继承和关联都可以给对象增加行为,区别如下: 继承是静态的(无法在程序运行时动态扩展),且作用于所有子类.硬编码,高耦合. 通过装饰器可以在运行时添加行为和属性到指定对象.关联关系就是在 ...
- Parameter Initializations in Deep Learning
全零初始化的问题: 在Linear Regression中,常用的参数初始化方式是全零,因为在做Gradient Descent的时候,各个参数会在输入的各个分量维度上各自更新.更新公式为: 而在Ne ...
- Linux多线程服务器端编程
目录 Linux多线程服务器端编程 线程安全的对象生命期管理 对象的销毁线程比较难 线程同步精要 借shared_ptr实现写时拷贝(copy-on-write) 多线程服务器的适用场合与常用编程模型 ...
- 通过queue实现前端的被动接收
一般请求都是由前端主动发起请求,后端响应,但有些情况必须要后端达到一定条件了才向前端相应数据,这就变成前端被动了.比如微信接收信息,只有别人给你发消息,你才能被动接收消息. 最近做了个项目,当有人经过 ...
- Powershell read XML format config file
upload.xml<?xml version="1.0" ?> <ftpConfig> <Protocol>ftp</Protocol& ...
- C++ STL map容器值为指针时怎么释放内存
最近在使用STL中map时,遇到了一个问题,就是当map中值为指针对象时怎么释放内存? // 站点与TCP连接映射表 (key为ip_port_stationCode, value为 clientSo ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- BZOJ 4821 (luogu 3707)(全网最简洁的代码实现之一)
题面 传送门 分析 计算的部分其他博客已经写的很清楚了,本博客主要提供一个简洁的实现方法 尤其是pushdown函数写得很简洁 代码 #include<iostream> #include ...
- 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 ...
- JavaScript中的反柯里化
转载自:https://www.cnblogs.com/zztt/p/4152147.html 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函 ...