tooltip 提示框多个柱状图取值

最新推荐文章于 2024-10-20 16:51:54 发布

chengchong_cc

最新推荐文章于 2024-10-20 16:51:54 发布

阅读量101

点赞数

分类专栏： vue echarts 文章标签： css javascript html echarts

本文链接：https://blog.csdn.net/chengchong_cc/article/details/130617684

版权

vue 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

echarts

22 篇文章 0 订阅

订阅专栏

该段代码定义了一个名为formatter的函数，用于格式化并展示数据。它接受params参数，生成包含名称、已派单、已办结、已驳回和已回访等状态的数据统计，并使用了CSS来定制背景、阴影、边框和字体样式，以创建一个具有视觉吸引力的统计块。

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

    formatter: function (params) {
      console.log(JSON.stringify(params[0])+"000000");
      return "<div style=\"width: 165px;height: 97px;background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 100%);box-shadow: 0px 4px 10px 0px rgba(77,86,161,1);border-radius: 2px;border: 1px solid;border-image: linear-gradient(180deg, rgba(255, 226, 74, 1), rgba(255, 157, 1, 1)) 1 1;backdrop-filter: blur(10px);\">" +
          "<div style=\"height: 16px;font-size: 12px;font-family: MicrosoftYaHei;color: #333333;line-height: 16px;margin-top: 6px;margin-left: 8px;\">"+params[0].name+"</div>" +
          "<div style=\"display: flex;flex-direction: row;\"><div style=\"width: 48px;height: 12px;font-size: 12px;font-family: MicrosoftYaHei;color: #999999;line-height: 12px;margin-left: 8px;margin-top: 10px;\">已派单：</div>" +
          "<div style=\"width: 24px;height: 12px;font-size: 12px;font-family: Impact;color: #333330;line-height: 12px;margin-top: 10px;\">"+params[0].data+"件</div>" +
          "<div style=\"width: 48px;height: 12px;font-size: 12px;font-family: MicrosoftYaHei;color: #999999;line-height: 12px;margin-left: 12px;margin-top: 10px;\">已办结：</div>" +
          "<div style=\"height: 12px;font-size: 12px;font-family: Impact;color: #333330;line-height: 12px;margin-top: 10px;\">"+params[1].data+"件</div>" +
          "</div><div style=\"display: flex;flex-direction: row;\">" +
          "<div style=\"width: 48px;height: 12px;font-size: 12px;font-family: MicrosoftYaHei;color: #999999;line-height: 12px;margin-left: 8px;margin-top: 10px;\">已驳回：</div>" +
          "<div style=\"width: 24px;height: 12px;font-size: 12px;font-family: Impact;color: #333330;line-height: 12px;margin-top: 10px;\">"+params[2].data+"件</div>" +
          "<div style=\"width: 48px;height: 12px;font-size: 12px;font-family: MicrosoftYaHei;color: #999999;line-height: 12px;margin-left: 12px;margin-top: 10px;\">已回访：</div>" +
          "<div style=\"height: 12px;font-size: 12px;font-family: Impact;color: #333330;line-height: 12px;margin-top: 10px;\">"+params[3].data+"件</div>" +
          "</div>" +
          "<div style=\"display: flex;flex-direction: row;\">" +
          "<div style=\"width: 48px;height: 12px;font-size: 12px;font-family: MicrosoftYaHei;color: #999999;line-height: 12px;margin-left: 20px;margin-top: 10px;\">其他：</div>" +
          "<div style=\"width: 24px;height: 12px;font-size: 12px;font-family: Impact;color: #333330;line-height: 12px;margin-top: 10px;margin-left: -12px;\">"+params[4].data+"件</div>";
    },