首页 前端知识 vue echarts中按钮点击后修改值 watch数据变化后刷新图表

vue echarts中按钮点击后修改值 watch数据变化后刷新图表

2024-02-22 11:02:24 前端知识 前端哥 943 401 我要收藏

1 点击按钮

{
        feature: {
          myBtn1: {
            show: true,
            title: '反转Y轴',
            showTitle: true,

            icon: 'path://M512 0A512 512 0 1 0 512 1024A512 512 0 0 0 512 0M320 320V192h384v128zM128 416V288h256v128zM320 704V576h384v128zM128 800V672h256v128z',
            onclick: () => {
              dataSetting.reverse_y = !dataSetting.reverse_y// 您需要修改一下 onclick 的回调函数,将它的上下文绑定到 Vue 实例上,否则 this 指的是 myBtn1 这个按钮对象,导致无法修改 showSetting 的值。
            },
          },

        },
        right: 120,
        bottom: '5%',

      },

2 设置值

 yAxis: [

      {
        scale: true, // 这句是 优化y轴最小刻度
        inverse: dataSetting.reverse_y, // 反转 Y 轴
        axisLine: { show: true },
        splitArea: {
          show: true  // y轴 区域渐变色
        }
      },

3 监控变量 dataSetting.reverse_y 是否变动, 变动后 刷新图

 watch: {
    'dataSetting.reverse_y'(newVal, oldVal) {
      this.getCharts(this.klineData, this.SingleChartObj.cycle)
    },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2489.html
标签
评论
发布的文章

jQuery中的ajax

2024-03-07 08:03:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!