search

ecomfe / echarts-for-weixin

基于 Apache ECharts 的微信小程序图表库
BSD 3-Clause "New" or "Revised" License
7.07k stars 1.58k forks source link

小程序上使用echarts tooltip不显示x轴的数据！！！！！！！！！！！ #478

Open xuhaoxin123 opened 5 years ago

xuhaoxin123 commented 5 years ago

提问前应该做的事

请确保提问前做了以下事，将完成的项目的 [] 改为 [x]：

需提供的信息

将符合项的 [] 改为 [x]，并补充需要的信息：

简单描述问题：

小程序上使用echarts tooltip不显示x轴的数据？？？？？？

预期效果：

image

（如有需要请提供预期的图）

实际效果：

image

（如有需要请提供截图）

复现环境：

AdminChenLY commented 5 years ago

同样问题 怎么解决额

xuhaoxin123 commented 5 years ago

看百度团队的心情啦

yaoyuan05 commented 5 years ago

目前使用formatter字符串模板来显示坐标数据,因为小程序不支持（dom）插入标签来显示小圆点。所以没有那么美观

Jimweb3 commented 5 years ago 
function clear() {
  var series = [
  ];
  for (var i = 0; i < yourLastTotalBarCount ; i++) {
    series.push({
      data: 0
    });
  }
  var option = {
    series: series
  };
  return option;
}
chart.setOption(clear());

这样搞了一下，在设置数据前，把原来的柱子的数量记住，把数据设置成0清除一下，这个就不受toolTip的限制了。。

jinbohao2013 commented 5 years ago

小程序上使用echarts tooltip不显示x轴的数据！！！！！！！！！！

youyou12344 commented 4 years ago

🍓 2.7.1、小程序中使用echarts-tooltip遇到的问题

1、如何换行？

用 \n 换行，小程序版echarts使用富文本渲染，不支持html

2、怎么显示图例的小圆点？

用 formatter，彩色的圆点用 '{marker0at0|}', {marker1at0|}, {marker2at0|}' 分别表示第 0、1、2 个系列，可能实现得不是很美，但是至少暂时可以这么用着。

3、不支持renderMode: html

最终解决🚀

      formatter : function(params) {
          // 可以打印一下params自行查看
          let res = `${params[0].name}\n`
          res += `{marker0at0|} ${params[0].seriesName}: ${params[0].value[1]}\n`
          res += `{marker1at0|} ${params[1].seriesName}: ${params[1].value[2]}\n`
          res += `{marker2at0|} ${params[2].seriesName}: ${params[2].value[3]}`
          return res        
      },
JavaFellow commented 4 years ago

🍓 2.7.1、小程序中使用echarts-tooltip遇到的问题

1、如何换行？

用 \n 换行，小程序版echarts使用富文本渲染，不支持html

2、怎么显示图例的小圆点？

用 formatter，彩色的圆点用 '{marker0at0|}', {marker1at0|}, {marker2at0|}' 分别表示第 0、1、2 个系列，可能实现得不是很美，但是至少暂时可以这么用着。

3、不支持renderMode: html

最终解决🚀

      formatter : function(params) {
          // 可以打印一下params自行查看
          let res = `${params[0].name}\n`
          res += `{marker0at0|} ${params[0].seriesName}: ${params[0].value[1]}\n`
          res += `{marker1at0|} ${params[1].seriesName}: ${params[1].value[2]}\n`
          res += `{marker2at0|} ${params[2].seriesName}: ${params[2].value[3]}`
          return res        
      },

这样解决可以，但是如果任意点击legend呢？用循环可以拼接tooltip中的内容，但是marker好像不对（并不是连续的？）

JavaFellow commented 4 years ago 
tooltip: {
        trigger: "axis",
        formatter: function(params) {
          let tip = `${params[0].name}\n`;
          for (let i = 0; i < params.length; i++) {
            tip += `{marker${params[i].seriesIndex}at0|} ${params[i].seriesName}: ${params[i].value}\n`;
          }
          return tip;
        }
      }

搞定了 image

xuhaoxin123 commented 4 years ago

牛逼啊，，可以

------------------ 原始邮件 ------------------ 发件人: "JavaFellow"<notifications@github.com>; 发送时间: 2020年3月3日(星期二) 下午4:03 收件人: "ecomfe/echarts-for-weixin"<echarts-for-weixin@noreply.github.com>; 抄送: "1090429158"<1090429158@qq.com>; "Author"<author@noreply.github.com>; 主题: Re: [ecomfe/echarts-for-weixin] 小程序上使用echarts tooltip不显示x轴的数据！！！！！！！！！！！ (#478)

tooltip: { trigger: "axis", formatter: function(params) { let tip = ${params[0].name}\n; for (let i = 0; i < params.length; i++) { tip += {marker${params[i].seriesIndex}at0|} ${params[i].seriesName}: ${params[i].value}\n; } return tip; } }

搞定了

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

cgwhtml commented 1 year ago

厉害厉害，大神真多