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

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)
    },

你可能感兴趣的:(echarts,vue,vue.js,echarts,前端)