vue中如何实现点击某个地方,让echarts生成的图表发生变化

总所周知,echarts中生成的图表只会在mounted中只执行一次
类似这种写法

mounted() {const lineCharts = echarts.init(this.$refs.charts)lineCharts.setOption({title: {text: '销售额趋势'},})
}

如果有个需求需要你点击按钮进行切换,这个title不能写死的,就要将你这个图表实例定义在data中方便操作,然后监听你点击之后的变化,我这里点击之后activeName发生了变化,然后watch你这个发生变化了的数据,就能改变echarts图表中的某个对象

data() {return {activeName: 'first',myCharts: null}},
mounted() {this.myCharts = echarts.init(this.$refs.charts)this.myCharts.setOption({title: {text: '销售额趋势'},})
},
watch: {activeName() {this.myCharts.setOption({title: {text: this.activeName+ '趋势'}})}},

vue中如何实现点击某个地方,让echarts生成的图表发生变化相关推荐

vue中父元素点击事件与子元素点击事件冲突
vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候,遇到子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢?这就用到vue事件 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
Vue中使用uuidv1根据时间戳和MAC地址生成唯一标识
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_若依前后端分离搭建在上面搭建起来Vue项目的基础上,怎样 ...
vue中a标签点击事件效果不理想
如果你发现在vue项目中给a标签加点击事件,然后在methods的事件处理函数中程序达不到预期的效果,比如该出的弹窗没有出来,考虑给点击事件加个prevent修饰符试试.prevent修饰符,本质上是 ...
vue中阻止快速点击多次
方案1:申明一个变量,点击时置灰提交按钮.等接口调用结束放开按钮,就是你在点击之后,ajax请求完成之前将那个按钮禁止点击 <template> <div><!-- 其他 ...
Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏
更新: 添加完整示例: test.vue文件 (点击id为content的p,flag的值不会改变;点击页面的其他地方,flag的值会改变) <template><div class ...
vue中如何实现点击按钮后加载更多数据
一.点击按钮后加载更多的数据显示在 data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据.定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示: data( ...
vue中 @click 绑定点击事件方法传递参数 typescript(通用)
话不多说还是直接上图简单明了 <template><div id="header"><img src="../../assets/logo ...

vue中如何实现点击某个地方,让echarts生成的图表发生变化

vue中如何实现点击某个地方,让echarts生成的图表发生变化相关推荐

最新文章

热门文章