vue中如何使用echarts
在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新
主要是以下几步:
- echarts的option配置项放在在data(){}或者computed(){}中
- 在mounted(){}生命周期去初始化数据,初始化echarts
- 在updated(){}生命周期中去setOption(option)渲染echarts。
模板vue文件如下:
<template>
<div id="myChart" ref="myChart"></div>
</template> <script>
import echarts from 'echarts'
export default {
data(){
return {
chart:null,
option:{
//echarts配置项
}
}
},
methods:{
initData(){//去请求初始化数据
},
initEcharts(){//初始化dom
let dom = this.$refs.myChart;
this.chart=echarts.init(dom);
},
drawEcharts(){//绘制echarts
this.chart.setOption(this.option);
},
},
mounted(){
this.initData();
this.initEcharts();
},
updated(){
this.drawEcharts();
}
}
</script>
vue中如何使用echarts的更多相关文章
- 在vue中使用的Echarts的步骤
1.首先在项目中安装Echarts npm install echarts -g --save //安装 2.在项目中引入Echarts(在main.js中引入) import echarts fro ...
- 关于vue中如何配置echarts以及使用方法
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- vue中如何使用echarts,使用axios获取数据
1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"&g ...
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- vue中,基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
- 在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随屏幕大小变化
在vue项目中使用Echarts 一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize? myChart 可以放在Data ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
随机推荐
- php url链接地址传数组方法 json_decode解析数组失败 经过url链接的json数组解析出错的解决方法 (原)
先说出现的问题: 请求一个接口(例如 http://www.a.com/getmes.php)需要传一个数组参数 param ,值为 数组 array(0=>'刘师傅',1=>'1760 ...
- sqli-labs(九)_COOKIE处注入
第二十关: 这关是一个Cookie处的注入,输入正确的账号密码后,会跳到index.php页面,如下图 这个时候再访问登陆页面的时候http://localhost/sqli-labs-master/ ...
- ES6class
类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面.Object.assign方法可以很方便地一次向类添加多个方法. 类的内部所有定义的方法,都是不可枚举的 ...
- PB中datewindow单双行显示不同颜色
调出datewindow,找到detail中的列,右击properties,左侧Background中的color属性添加 IF(MOD(GETROW(),2)=0,RGB( 255, 250, 20 ...
- 基于AOP注解实现业务功能的动态配置
一.导入jar包 <dependency><!-- 4.引入AOP--> <groupId>org.springframework.boot</groupId ...
- 十一 JS继承
// time:2016.2.1 // des:继承 function Enemy() { this.level = 50; console.log("Enemy constructor&q ...
- JavaScript中直接量和变量
标题 1.直接量 顾名思义,可以直接拿来使用的量.那哪些是直接量呢?数据类型又有很多种,因为不同类型的数据处理方式是不同的,所以数据要分类型 基本类型 1.1 String字符串 用单引号或双引号引起 ...
- html5-垂直定位
*{ padding: 0px; margin: 0px; }#div2{ background: green; padding: 15px; width: 200px; ...
- 师大校赛D coloring Game 并查集
这题说的是 在一个 森林中 两个人在这棵树上涂颜色,黑色或者白色,第一次只能在1 号节点上涂色 第二次 只能在2上涂,以此类推, 在每个节点上只能涂黑色或者白色,并且相邻的点不能有相同的颜色,最后求不 ...
- JavaScript--Document对象方法createElement()和createTextNode()
createElement() 方法通过指定名称创建一个元素 createTextNode() 可创建文本节点 <!DOCTYPE html> <html> <head& ...