apexcharts w/vue,切换stackType不会正确地呈现刻度和值。
创始人
2024-11-10 01:30:38
0

要解决ApexCharts与Vue中切换stackType时不正确呈现刻度和值的问题,可以尝试使用以下解决方法:

  1. 确保安装了apexcharts和vue-apexcharts插件:
npm install apexcharts vue-apexcharts
  1. 在Vue组件中引入所需的库:
import VueApexCharts from 'vue-apexcharts'
  1. 在Vue组件中注册ApexCharts组件:
export default {
  components: {
    apexchart: VueApexCharts,
  },
  // 其他组件代码
}
  1. 在Vue组件的data选项中定义ApexCharts的初始配置:
data() {
  return {
    chartOptions: {
      chart: {
        height: 350,
        type: 'bar',
      },
      series: [
        {
          name: 'Series 1',
          data: [30, 40, 45, 50, 49, 60, 70, 91, 125],
        },
        {
          name: 'Series 2',
          data: [23, 40, 35, 50, 49, 60, 70, 91, 125],
        },
      ],
      xaxis: {
        categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009],
      },
      fill: {
        opacity: 1,
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          endingShape: 'rounded',
        },
      },
    },
    stackType: 'normal',
  }
},
  1. 在Vue组件的模板中使用ApexCharts组件,并绑定切换stackType的事件:

  1. 在Vue组件的methods中定义切换stackType的方法:
methods: {
  toggleStackType() {
    this.stackType = this.stackType === 'normal' ? '100%' : 'normal'
    this.updateChart()
  },
  updateChart() {
    this.$refs.chart.updateOptions({
      plotOptions: {
        bar: {
          stacked: this.stackType !== 'normal',
        },
      },
    })
  },
},

通过以上步骤,就可以在Vue应用中使用ApexCharts,并能够正确切换stackType以呈现正确的刻度和值。

相关内容

热门资讯

2分钟细说!wepoker辅助... 2分钟细说!wepoker辅助器有哪些功能,闲来透视辅助器最新版,黑科技教程(证实有挂)-哔哩哔哩1...
热点推荐!wpk透视可以安装,... 热点推荐!wpk透视可以安装,多乐够级辅助,解密教程(有挂教程)-哔哩哔哩1、全新机制【wpk透视可...
盘点一款!wepoker辅助分... 盘点一款!wepoker辅助分析器,网易水润血战到底辅助,解说技巧(有挂解密)-哔哩哔哩1、完成网易...
今日百科!竞技联盟辅助插件,浙... 今日百科!竞技联盟辅助插件,浙江宝宝游戏辅助软件,扑克教程(有挂实锤)-哔哩哔哩今日百科!竞技联盟辅...
记者爆料!hhpoker透视脚... 记者爆料!hhpoker透视脚本视频,巴郎新疆开挂,技巧教程(有挂规律)-哔哩哔哩亲,关键说明,hh...
让我来分享经验!wepoker... 让我来分享经验!wepokerplus透视挂,桂林字牌辅助科技,曝光教程(真的有挂)-哔哩哔哩1、金...
专业讨论!拱趴大菠萝自动计算机... 专业讨论!拱趴大菠萝自动计算机器人,广东闲来辅助软件通用,黑科技教程(有挂方针)-哔哩哔哩一、拱趴大...
玩家攻略推荐!hhpoker到... 玩家攻略推荐!hhpoker到底可以透视挂码,小逸碰胡辅助器,揭秘教程(有挂技术)-哔哩哔哩1、超多...
总算了解!佛手在线大菠萝辅助,... 总算了解!佛手在线大菠萝辅助,手机填大坑辅助器,分享教程(有挂详情)-哔哩哔哩佛手在线大菠萝辅助辅助...
分享一款!aapoker辅助插... 分享一款!aapoker辅助插件工具,wepoker透视有,揭秘教程(有挂神器)-哔哩哔哩1、首先打...