在VUE中使用Echarts
第一步:下载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的更多相关文章
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
- vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
随机推荐
- 解决Spring Boot Configuration Annotation Processor not found in classpath
问题截图: 解决方式: 在pom.xml文件中添加这些依赖 <dependency> <groupId>org.springframework.boot</groupId ...
- Java 的 JJWT 实现 JWT
JJWT是一个提供端到端的JWT创建和验证的Java库 依赖 <dependency> <groupId>io.jsonwebtoken</groupId> < ...
- csps模拟测试7576一句话题解
题面:https://www.cnblogs.com/Juve/articles/11694454.html 75考了数学,化学和物理... T1: 假设有一个A和B,那么对于每一个j!=i,都有$\ ...
- 0815NOIP模拟测试赛后总结
立个flag:今天一定改完最少两道题然后认认真真写题解. 8/16 upd:果然flag不要立太狠…… 赛时状态: 赛后的老师:这套题我就没想让你上100分. 120分的天皇大神撇了撇嘴. 众人:…… ...
- 为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字)
为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字) 在PyData Seattle 2017中,Jake Vanderplas介绍了Python的发展历程以及最新动态.在这里我们把 ...
- Python(三)基础篇之「模块&面向对象编程」
[笔记]Python(三)基础篇之「模块&面向对象编程」 2016-12-07 ZOE 编程之魅 Python Notes: ★ 如果你是第一次阅读,推荐先浏览:[重要公告]文章更新. ...
- RvmTranslator7.2
1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...
- springboot项目中进行并发测试
一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...
- vue表格之@row-click="handleSelect" 与setCurrentRow
作用:表格行点击触发的事件 注意与@change.@selection-change事件的区分 <el-table ref="RoomTable" @row-click=&q ...
- 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 ...