1、npm安装echarts:
    $ npm install echarts -S
2、html代码:
<template>
<div id="chartColumn" style="width: 100%; height: 400px;">
</div>
</template>

3. js代码:

<script>
import echarts from 'echarts'
export default {
data(){
return {
chartColumn: null
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine(){
this.chartColumn = echarts.init(document.getElementById('chartColumn')); this.chartColumn.setOption({
title: { text: 'Column Chart' },
tooltip: {},
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'
}]
});
}
}
}
</script>

4、效果图:

Vue2.0+elementUI使用echarts插件的更多相关文章

  1. Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

    挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...

  2. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  3. Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统

    最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...

  4. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  5. vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime=" ...

  6. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

  7. Vue实例:vue2.0+ElementUI框架开发pc项目

    开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...

  8. vue2.0+Element-ui实战案例

    前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭 ...

  9. vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-uplo ...

随机推荐

  1. python2,socket多进程的错误pickle.PicklingError: Can't pickle

    python2,socket多进程的错误pickle.PicklingError: Can't pickle 源码: #coding:utf-8 import socket import pickle ...

  2. js实现两个文本框数值的加减乘除运算

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  3. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_18-身份校验-测试

    在顶级域名下配置 网关的地址在上面配置一下 重启nginx 拒绝访问后面的代码都加上 return null 开始测试 换成域名的方式访问 有cookie.但是拿不到header 加上header测试 ...

  4. Rust基础笔记:闭包

    语法 Closure看上去是这样的: let plus_one = |x: i32| x + 1; assert_eq!(2, plus_one(1)); 首先创建一个绑定plus_one,然后将它分 ...

  5. python读取csv文件、excel文件并封装成dict类型的list,直接看代码

    # coding=UTF-8import csvimport xlrd class ReaderFile(): """ 读取csv文件 filePath:文件路径 &qu ...

  6. 货币转换函数:CURRENCY_CONVERTING_FACTOR

    针对不同币别要做金额栏位转换 计算规则: 金额 = 原始金额 * 转换率 以下转自博客:https://www.cnblogs.com/sanlly/p/3371568.html 货币转换函数:CUR ...

  7. SpringMvc+ajax跨域请求时,出现options类型的请求并返回403的解决方案

    在使用 $.ajax({ url:'http://127.0.0.1:8081/rest/ccxxx/xxxx', type:'POST', dataType:"json", co ...

  8. 关于类似QQ的展开和折叠效果的实现

    介绍: 1.两级折叠与展开: 实现原理如下: 1>通过表视图的组的头视图和单元格实现; 2>通过改变cell的高度实现; 3>通过cell实现; 实现 UITableView 的ce ...

  9. laravel服务提供者类说明

    IoC 是将内部设计的类交给系统去控制,但是有些类在初始化的时候,需要制定特定的参数,或者当你需要将实现类绑定到某个接口,这时候就必须对这些依赖进行配置,系统才能正确解析并引用. register 而 ...

  10. 【Leetcode_easy】661. Image Smoother

    problem 661. Image Smoother 题意:其实类似于图像处理的均值滤波. solution: 妙处在于使用了一个dirs变量来计算邻域数值,看起来更简洁! class Soluti ...