vue echarts 柱状图因高度太低难以点击

最新推荐文章于 2024-12-23 13:40:12 发布

代码敲着敲着就睡了

最新推荐文章于 2024-12-23 13:40:12 发布

阅读量1.4k

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49261425/article/details/119139445

版权

本文介绍在使用Vue集成ECharts时遇到的一个问题：当柱状图高度较低时，导致柱子过于细小，从而难以精确点击。我们将探讨如何优化这种情况，提供解决方案，确保在视觉效果和交互体验之间找到平衡。

摘要由CSDN通过智能技术生成

initChart() {
        var myChart = echarts.init(document.getElementById('lineChart'));
        this.chart = echarts.init(this.$el, 'macarons')
        
        this.chart.setOption({
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
           tooltip: {
              trigger: 'axis',
              formatter: (comp, value) => {
                  const [serie] = comp;

                  return `${serie.name}: ${serie.value}`;
              },
              axisPointer: {
                  show: true,
                  status: 'shadow',
                  z: -1,
                  shadowStyle: {
                      color: '#e6f7ff',
                  },
                  type: 'shadow',
              },
           },
          xAxis: {
              type: 'cate