javascript - echarts的tooltip样式问题

问题描述

问 题

echarts制作的折线图tooltip和整个图表一样大，远远超过提示信息的大小

<div id="main" style="width:500px;height:500px;"></div>

var datajson = {
  title: {
    text: "",
    subtext: "",
    x: "center"
  },
  tooltip: {
    trigger: "axis"
  },
  "legend": {
    x: "left",
    data: ["营收环比增长率"]
  },
  xAxis: [{
    type: "category",
    name: "",
    data: [2001, 2002,
      2003, 2004,
      2005, 2006,
      2007, 2008,
      2009, 2010,
      2011, 2012,
      2013, 2014
    ]
  }],
  yAxis: [{
    type: "value",
    name: " % "
  }],
  series: [{
    name: "营收环比增长率",
    type: "line",
    data: [-5.76, 6.52, 28.69, 41.57, 35.30, 32.86, 13.49, 20.52, -7.37, 42.24, 30.97, 11.19, 3.38, -1.89]
  }]
}

var chart = echarts.init(document.getElementById('main'));
chart.setOption(datajson);

经过测试以上代码在echart官网可以正常显示，单独创建例子也可以显示，但是放到项目中就会出现图中的bug，有可能是项目封装中有默认的属性，但是找不到，希望有熟悉echarts的大哥给点提示，歪瑞三克油！！！

解决方案

默认的属性也不会有这么大，不过这个 tooltip 并不是 canvas 画出来的，而是一个 div。
检查元素看看是不是你的项目中的样式影响了它的大小。

这篇关于javascript - echarts的tooltip样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！