这个示例使用 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');

页面展示:

在vue-cli项目中使用echarts的更多相关文章

  1. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  2. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  3. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  4. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  9. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  10. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

随机推荐

  1. Xamarin Android 中Acitvity如何传递数据

    在xamarin android的开发中,activity传递数据非常常见,下面我也来记一下在android中activity之间传递数据的几种方式, Xamarin Android中Activity ...

  2. [置顶] android ListView包含Checkbox滑动时状态改变

    题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...

  3. UVA 10891 Game of Sum

    题目大意就是有一个整数串,有两个人轮流取,每次可以取走一个前缀或后缀.两人都足够聪明,且都会使自己收益最大.求取完后先手比后手多多少. 每次我看见上面那句就会深感自己的愚笨无知. 所以来推推性质? 1 ...

  4. sar 命令详解

    sar (System Activity Reporter)命令是LInux下系统运行状态统计工具, 它将指定的操作系统状态计数器显示到标准输出设备. sar 工具将对系统当前的状态进行取样,然后通过 ...

  5. java获取properties配置文件值

    package me.ilt.Blog.util; import java.io.File; import java.io.FileInputStream; import java.io.IOExce ...

  6. Struts2-整理笔记(二)常量配置、动态方法调用、Action类详解

    1.修改struts2常量配置(3种) 第一种 在str/struts.xml中添加constant标签 <struts> <!-- 如果使用使用动态方法调用和include冲突 - ...

  7. thinkinginjava学习笔记04_初始化与清理

    java沿用了c++的构造器,使用一个和类名完全一样的方法作为类的构造器,可以有多个构造器来通过不同的参数进行构造,称为重载:不仅是构造器可以重载,其他方法也一样通过不同的形参以及不同的返回值来实现重 ...

  8. Java Web高级编程(三)

    使用过滤器改进应用程序 一.过滤器的目的 过滤器是可以拦截访问资源的请求.资源的响应或者同时拦截两者的应用组件.过滤器可以检测和修改请求和响应,同时也可以拒绝.重定向或转发请求.javax.servl ...

  9. robotframework的学习笔记(十五)----robotframework标准库Collections

    Collections库是RobotFramework用来处理列表和字典的库,官方文档是这样介绍的:A test library providing keywords for handling lis ...

  10. MySQL迁移方案(后续再补充)

    出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该声明. ...