echarts------tooltip formatter使用方法

~ tooltip formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1. 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在  trigger  为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

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

formatter:'{b0}: {c0}<br />{b1}: {c1}'

2. 回调函数

回调函数格式：

(params:Object|Array,ticket: string,callback:(ticket: string, html: string)) =>string | HTMLElement | HTMLElement[]

支持返回 HTML 字符串或者创建的 DOM 实例。

第一个参数 params 是 formatter 需要的数据集。格式如下：

{

componentType:'series',

// 系列类型

seriesType: string,

// 系列在传入的 option.series 中的 index

seriesIndex: number,

// 系列名称

seriesName: string,

// 数据名，类目名

name: string,

// 数据在传入的 data 数组中的 index

dataIndex: number,

// 传入的原始数据项

data:Object,

// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）

value: number|Array|Object,

// 坐标轴 encode 映射信息，

// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）

// value 必然为数组，不会为 null/undefied，表示 dimension index 。

// 其内容如：

// {

//    x: [2] // dimension index 为 2 的数据映射到 x 轴

//    y: [0]

 // dimension index 为 0 的数据映射到 y 轴

// }

encode:Object,

// 维度名列表

dimensionNames:Array,

// 数据的维度

 index，如 0 或 1 或 2 ...

// 仅在雷达图中使用。

dimensionIndex: number,

// 数据图形的颜色

color: string,

// 饼图的百分比

percent: number,

}

详情见 (echarts------tool--formatter)

---

阳新县15885608938： echarts的tooltip怎么给数据 - ？
焦复腹膜： 先把ds.Tables[0].Rows[0][j].ToString()中的值赋给一个字符串,然后在让它在tooltip中显示就OK了! 如:string str=＂＂; for(int j=0;j

阳新县15885608938： java中echarts关系图中如何引用dataTool:Uncaught TypeError: Cannot read property 'gexf' of undefined - ？
焦复腹膜： 使用echarts,只需要导入这个包就可以了<!-- echarts报表图形 --><script src=＂static/common/js/echarts.js＂ type=＂text/javascript＂></script>你报的错误好像是读取了一个未定义的属性“gexf”

阳新县15885608938： echarts的 tooltip formatter参数怎么回调吗 - ？
焦复腹膜： 官方文档里面好像没有这个API默认的tooltip不是canvas而是div;所以直接在formatter里面添加span设置好颜色就可以了tooltip: {trigger: 'axis',formatter: '}

阳新县15885608938： echarts中纵坐标和tooltip的数据分别使用不同data可否 - ？
焦复腹膜： if(maxval > 9999 && maxvalformatter = function(value, index) { if(value != 0) return value/10000 + '万'; else return 0; } }else if(maxval > 100000000){ formatter = function(value, index) { if(value != 0) return value/1000000 + '亿'; else return 0; } }

阳新县15885608938： 如何用echarts实现局域网使用的网页 - ？
焦复腹膜： 1)引入echarts.js.<script type=＂text/javascript＂ src=＂./js/echarts.js＂></script>112)创建一个DOM容器.熟悉html的朋友应该很清楚,一个html就是一个DOM树,各个标签节点都是dom节点.DOM容器就是里面可以存放其他节点标签,比如...

阳新县15885608938： 用标签式单文件引入方式使用echarts,怎么绑定事件 - ？
焦复腹膜： 标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如:echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color')

阳新县15885608938： github echarts 怎么使用 - ？
焦复腹膜： echarts的使用步骤如下:1. 去官网下载echarts的压缩包.2. 引入到项目中.3. 页面引入echarts.js.举例:在页面生成一个条形图.首先,使用require命令导入echarts,require.config({ paths : { echarts : 'resources/js/lib/echarts' } }); 编写bar的代...

阳新县15885608938： echarts怎么做实时动态的折线图 - ？
焦复腹膜： 1、创建折线图的数据区(包括年份和数据)2、仅选择数据区创建折线图(插入选项卡/图表工具组/折线图)3、得到的折线图x坐标不满足要求,在图表区单击鼠标右键,选择“选择数据”,进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列

阳新县15885608938： echarts.js的缺点是什么? - ？
焦复腹膜： echarts.js缺点主要是不兼容IE9以下浏览器,因为它是基于HTML5的canvas开发的.目前比较流行且功能强大的绘图工具,经过个人调研,主要有echarts,highcharts,amcharts三种,echarts是百度开发,开源免费,且功能强大,手机项目或者不考...

阳新县15885608938： 请教echarts地图的一些使用问题 - ？
焦复腹膜： 看了echarts的demo以及网上大家使用echarts的经验.我使用的是大家都推荐的模块化单文件引入.首先要去echarts和zrender官网上下载需要的文件 然后将下载下来的文件放在你项目的目录下,我将文件都放在我项目的js目录下.需要注意的...