在echarts官网完成绘制后,将配置复制到本地,结果tooltip无法显示。

如图所示BUG

项目使用vue3,echarts5.0,代码写的是vue2。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['完工数量', '完成率']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '数量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '完成率',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '完工数量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },barWidth: '40%', // 修改柱子宽度
            // 或者使用 barCategoryGap 设置类目间柱子的间距(例如:'20%')
            // barCategoryGap: '20%'
            itemStyle: {
              color: '#1890ff' // 设置柱子颜色为淡蓝色
            },
            label: {
              show: true, // 显示数据标签
              position: 'top' // 数据标签显示在柱子顶部
            },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '完成率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },itemStyle: {
              color: '#faad14' // 设置柱子颜色为淡蓝色
            },
            label: {
              show: true, // 显示数据标签
              position: 'top' // 数据标签显示在柱子顶部
            },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

排查了半天问题,发现这部分代码不正确。

    this.myChart1 = echarts.init(this.$refs.topL);
    this.option1 && this.myChart1.setOption(this.option1);
    this.myChart2 = echarts.init(this.$refs.topR);
    this.option2 && this.myChart2.setOption(this.option2);

    let myChart3 = echarts.init(this.$refs.bottom);
    this.option3 && myChart3.setOption(this.option3);

如果将myChart定义在了data()里面,那么tooltip就会不显示。

需要通过let来定义,就可以显示了。

!!!!!!

还有一种应该是最好的解决方法,就是Vue2中所有的myChart都放在script标签下的第一行

<script>
var myChart1;

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐