zoukankan      html  css  js  c++  java
  • echarts绘制关系图之formatter的应用

    formatter支持字符串模板和回调函数两种形式
    1.字符串
    formatter: '{b0}: {c0}<br />{b1}: {c1}'
    • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

    • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

    • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

    • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

    2.回调函数

            formatter: async (params, ticket, callback) => {
              const res = await getDetail(params.value);
              let listHtml = `<div>客商名称:${params.name}</div>`;
              if (res.list) {
                res.list.forEach((item, index) => {
                  if (index === 0) {
                    listHtml += `<div>OEM客商:${item.name}</div>`;
                  } else {
                    listHtml += `<div style="margin-left: 72px">${item.name}</div>`;
                  }
                });
              }
              setTimeout(() => {
                callback(ticket, listHtml);
              }, 0.0001);
              // return 'loading';
            },
    

      params 是 formatter 需要的数据集

      ticket 是异步回调标识

      callback 是异步回调

  • 相关阅读:
    nginx 配置下载text等文件
    linux 挂载硬盘
    linux 常用命令
    linux 常用目录的作用
    linux 增加新用户无法使用sudo命令解决办法
    linux 安装ifconfig
    linux 更换yum源
    eclipse 环境安装
    ORACLE 迁移MYSQL 随笔
    微信跳转显示空白页
  • 原文地址:https://www.cnblogs.com/fdd-111/p/14116260.html
Copyright © 2011-2022 走看看