vue-echarts-v3的使用,支持组件 resize 事件自动更新视图(echarts不支持)

1、定义

option定义在data里面(如果后续某个事件内,改变了option里面的series[i].data的值,图表会自动刷新):

在这里插入图片描述

option_hsl 内容为echarts官网例子里面的定义option部分:series里面的data可以通过后台接口动态渲染

在这里插入图片描述
定义一个事件,来改变series[i].data的值,测试是否会自动刷新图表
在这里插入图片描述在这里插入图片描述
点击前:在这里插入图片描述
点击后:在这里插入图片描述

2、使用:

  • npm install --save echarts vue-echarts-v3
  • 在使用的组件内引入 import IEcharts from ‘vue-echarts-v3/src/full.js’
  • 在这里插入图片描述
一定要设置高度,不然统计图无法显示出来
<div  :style="{600+'px'}">
	 <IEcharts
   		:option="option_hsl"   //echarts官网案例里面的option部分的内容
   		:loading="loading1"   //加载圈圈,值为true或false
   		:loadingOpts="chart_loading_options"  //设置加载数据时候的文字和样式
   		:resizable="true"  //是否自动更新视图
   		@ready="onEchartReady"
   		@click="onEchartClick"  //点击统计图数据部分,触发
    />
</div>

在这里插入图片描述

参考链接:
https://blog.csdn.net/weixin_33970449/article/details/88767110
https://www.cnblogs.com/cag2050/p/7831452.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值