在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. Django中间件拦截未登录url

    1.利用装饰器在视图中拦截未登录的url @login_required(login_url='/user/login/') def homepage(request): pass 这种方法适合于程序 ...

  2. LVS集群的ipvsadm命令用法

    准备一台Linux服务器,安装ipvsadm软件包,练习使用ipvsadm命令,实现如下功能: - 使用命令添加基于TCP一些的集群服务 - 在集群中添加若干台后端真实服务器 - 实现同一客户端访问, ...

  3. 高可用4层lvs——keepalived

    搭建方式: node01: ipvsadm -C ifconfig eth0:2 down --------------------------------- node01,node04安装keepa ...

  4. L3-002 特殊堆栈 (30 分)

    大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有“入栈”(将新元素插入栈顶)和“出栈”(将栈顶元素的值返回并从堆栈中将其删除).现请你实现一种特殊的堆栈,它多了一种操作叫“查中值”,即返回堆 ...

  5. vim 修改复制过来的代码缩进

    命令模式下 :1,9<  //1至9行回退一个tab :1,9> //1至9行缩进一个tab 让不可打印字符心事出来::set list

  6. Stylus-富有表现力的、动态的、健壮的CSS

    今天总结一下Stylus记一些常用的也是最基本的用法 一.  选择器 Stylus是基于缩进的这让我们可以更快捷的编写css比如 body { margin:; paddind:; font-size ...

  7. php内置函数分析之array_change_key_case()

    PHP_FUNCTION(array_change_key_case) { zval *array, *entry; zend_string *string_key; zend_string *new ...

  8. vi编辑器的快捷键汇总

    光标控制命令 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027& ...

  9. Azure IoT 技术研究系列1

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是我们物联网技术的最大应用,车联网.物联网. 互联网三网合一.作为Azure重要的Partner和 ...

  10. Kali Linux的发展史,专为数字取证和渗透测试而设计

    Kali Linux拥有非常强大的网络功能,Kali Linux是一个Debian衍生的Linux发行版,专为数字取证和渗透测试而设计.它是由OffensiveSecurityLtd维护和资助,是由M ...