vue在使用在使用ECharts时的异步更新和数据加载详解时的异步更新和数据加载详解
主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料,文中通过示例代码介绍的非常
详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
前言前言
最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之
前,对eCharts不熟悉的朋友们可以参考下这篇文章://www.jb51.net/article/128790.htm 下面话不多说了,来一起看看详细
的介绍吧。
使用方法使用方法
使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)
<script src="public/js/echarts.common.min.js"></script>
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,
首先先把,echarts里setOption的option,单独领出来,初始化放在data里
data() { return {
getSetOption: {//折线图
title: {
text: null
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []