echarts鼠标划入数据添加百分比

最新推荐文章于 2023-10-18 16:42:42 发布

长安城中一市民

最新推荐文章于 2023-10-18 16:42:42 发布

阅读量1k

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/wmingcsdn/article/details/98072277

版权

本文介绍如何使用Echarts库，在鼠标悬停图表时动态展示数据的百分比，增强图表的交互性和信息展示效果。通过配置Echarts的tooltip组件，实现数据项的百分比计算和显示。

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

    // ----->start
    let dataNum = {}
    let xAxis = that.option.xAxis[0].data
    for (let x in xAxis) {
      dataNum[xAxis[x]] =
        Number(that.option.series[0].data[x]) +
        Number(that.option.series[1].data[x]) +
        Number(that.option.series[2].data[x]) +
        Number(that.option.series[3].data[x]) +
        Number(that.option.series[4].data[x]) +
        Number(that.option.series[5].data[x])
    }
    that.option.tooltip = {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      },
      //数据格式
      formatter: function (params) {
        let dataFunction = function (params) {
          let str = ((params.value / dataNum[params.name] * 1000) / 10).toFixed(2)
          if (str === 'NaN') {
            str = '0'
          }
          return