第一步:下载echarts

npm install echarts --save

第二步:在项目中main.js引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

第三步:在组件中使用

在template标签中写

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

在script标签中

export default { 

    name: 'test', 

    data(){ 

        return{ 

       } 

    }, 

   mounted(){   

        this.drawLine();

    },

    methods: {   

          drawLine(){       

         // 基于准备好的dom,初始化echarts实例       

             let myChart = this.$echarts.init(document.getElementById('myChart'),'light')       

          // 绘制图表       

            myChart.setOption({           

                       title: { text: '这里是表格的标题,自带加粗' },           

                       tooltip: {},           

                       // 图标中x轴的内容

                      xAxis: {               

                                   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]           

                       },     

                      // 图标中y轴的内容

                      yAxis: {},     

                       // 数据 

                      series: [

                            {                name: '销量',               

                                              type: 'bar',               

                                            data: [5, 20, 36, 10, 10, 20]         

                                 }

                               ]       

                       });   

               } 

           }

          }

  注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这是想要达到的要求

当点击年时图表的x轴显示5个年份。点击月时图表的x轴显示12个月。默认显示一周。

由于后台直接返回我一个数组

代码如下

在VUE中使用Echarts的更多相关文章

  1. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  4. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  5. vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  6. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  7. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  8. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  9. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

随机推荐

  1. 解决Spring Boot Configuration Annotation Processor not found in classpath

    问题截图: 解决方式: 在pom.xml文件中添加这些依赖 <dependency> <groupId>org.springframework.boot</groupId ...

  2. Java 的 JJWT 实现 JWT

    JJWT是一个提供端到端的JWT创建和验证的Java库 依赖 <dependency> <groupId>io.jsonwebtoken</groupId> < ...

  3. csps模拟测试7576一句话题解

    题面:https://www.cnblogs.com/Juve/articles/11694454.html 75考了数学,化学和物理... T1: 假设有一个A和B,那么对于每一个j!=i,都有$\ ...

  4. 0815NOIP模拟测试赛后总结

    立个flag:今天一定改完最少两道题然后认认真真写题解. 8/16 upd:果然flag不要立太狠…… 赛时状态: 赛后的老师:这套题我就没想让你上100分. 120分的天皇大神撇了撇嘴. 众人:…… ...

  5. 为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字)

    为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字) 在PyData Seattle 2017中,Jake Vanderplas介绍了Python的发展历程以及最新动态.在这里我们把 ...

  6. Python(三)基础篇之「模块&面向对象编程」

    [笔记]Python(三)基础篇之「模块&面向对象编程」 2016-12-07 ZOE    编程之魅  Python Notes: ★ 如果你是第一次阅读,推荐先浏览:[重要公告]文章更新. ...

  7. RvmTranslator7.2

    1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...

  8. springboot项目中进行并发测试

    一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  9. vue表格之@row-click="handleSelect" 与setCurrentRow

    作用:表格行点击触发的事件 注意与@change.@selection-change事件的区分 <el-table ref="RoomTable" @row-click=&q ...

  10. Error: Could not link: /usr/local/share/doc/homebrew

    mac 执行brew update 报错 Error: Could not link: /usr/local/share/doc/homebrew 更新brew,报错 Error: Could not ...