在vue-cli项目中使用echarts --》Wangqi

 

这个示例使用 vue-cli 脚手架搭建

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像:

  • 安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 使用
    cnpm install echarts -S

    创建图表

    全局引入

  • main.js
    // 引入echarts
    import echarts from 'echarts' Vue.prototype.$echarts = echarts
  • Hello.vue
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    export default {
    name: 'hello',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    },
    mounted(){
    this.drawLine();
    },
    methods: {
    drawLine(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
    title: { text: '在Vue中使用echarts' },
    tooltip: {},
    xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
    }]
    });
    }
    }
    }

    注意: 这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

    按需引入

    上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

  • Hello.vue
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    export default {
    name: 'hello',
    data() {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    },
    mounted() {
    this.drawLine();
    },
    methods: {
    drawLine() {
    // 基于准备好的dom,初始化echarts实例
    let myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
    }]
    });
    }
    }
    }

    这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。

  • 页面展示

如果需要引入像字符云之类的官方包里没有的图表,可以在github上找到,如何使用具体请参考我前一阵子的文章http://www.cnblogs.com/Smiled/p/7146550.html

字符云示例:

cnpm install echarts -S

在需要使用的页面引入

 require('echarts-wordcloud');

页面展示:

Echars -- 在Vue中如何使用Echars的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. PyMySQL和MySQLdb的区别

      网上很多关于Scrapy存入MySQL的教程,都会发现又这么一个包的引入: import MySQLdb import MySQLdb.cursors 聪明的你或许已经算到,需要安装MySQLdb ...

  2. Codeforces Round #426 (Div. 2) - C

    题目链接:http://codeforces.com/contest/834/problem/C 题意:两个在玩一个游戏,对于每一轮,选定一个自然是k,初始两人的分数都为1,每一个回合赢的人在他当前分 ...

  3. PAT Advanced 1011 World Cup Betting (20 分)

    With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...

  4. python time、datetime模块

    时间的三种格式:1)时间戳 2)格式化的时间字符串 3)元组(struct_time):time.struct_time(tm_year=1970, tm_mon=5, tm_mday=23, tm_ ...

  5. ASP.NET Core 基础知识(一) ASP.NET Core是什么?与.NET Framework、Mono之间的关系 ?

    一.概念: ASP.NET Core 是一个开源的.跨平台的 .NET 实现.而 .NET Framework 是基于 Windows 的 .NET 实现,Mono 是 .NET Framework ...

  6. mysql 在查字符串字段中 条件参数传为数字0查到与实际数据不匹配问题

    比如: CREATE TABLE `e` ( `id` int(11) DEFAULT NULL, `status` varchar(255) DEFAULT NULL, `b` varchar(25 ...

  7. 【leetcode】1104. Path In Zigzag Labelled Binary Tree

    题目如下: In an infinite binary tree where every node has two children, the nodes are labelled in row or ...

  8. git的初步研究1

    工作中很多项目再往git上迁移,所以打算研究下git git是个版本控制系统 理解git工作区.暂存区.版本库的概念 工作区:在电脑中能看到的目录 暂存区:index即索引 即首先add加入暂存区 c ...

  9. html的a链接的href怎样才另起一个页面,一个页面调到另一个html页面

    在后面加上target ="_blank",就可以,正如: <ul class="nav navbar-nav navbar-right" style=& ...

  10. luogu 4147 玉蟾宫 悬线DP

    Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in",& ...