echarts的tooltip的formatter的自定义配置(设置可以使用ajax返回的参数)

本文介绍了如何在Echarts的tooltip formatter中使用自定义模板,并结合AJAX返回的数据。通过在option之前定义变量并赋值为AJAX参数,可以在formatter内访问到这些数据,例如获取并展示unit信息。
摘要由CSDN通过智能技术生成

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

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}(百分比)

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

示例:

formatter: '{b0
ECharts 是一个由百度开源的数据可视化库,广泛用于制作各种图表。饼状图是一个常见的图形化展示手段,常用于表示各个部分占总体的比例。如果在饼状图中显示的百分比值包含小数点,这可能会影响数据清晰度或者美观。 要在 ECharts 中将饼状图的百分比值去掉小数点,可以自定义 `series` 的 `label` 属性,特别是 `formatter` 函数。`formatter` 函数允许您自定义每个数据点标签的内容。通过这个函数,您可以控制标签显示文本的具体形式。 ### 示例代码 假设我们有一个简单的 ECharts 饼状图配置: ```javascript option = { tooltip : { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['Direct', 'Email', 'Search'] }, series : [ { name: '访问来源', type: 'pie', radius : '50%', center: ['50%', '60%'], data:[ {value:335, name:'Direct'}, {value:310, name:'Email'}, {value:234, name:'Search'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inner' }, formatter: function (params) { // 根据需要修改此函数内容 var value = params.value; return Math.floor(value / 10) * 10 + '%'; // 将百分比的小数值去掉 } } } ] }; ``` 在这个例子中,我们将 `label.formatter` 设置为一个函数,该函数接收单个参数,即数据点的值。然后,我们对这个值进行了处理,将其除以10取整,并乘以10以去除小数部分,最后再添加百分号 `%` 到结果字符串上。 ### 相关问题: 1. **如何调整饼状图的颜色**? - 可以通过设置 `color` 数组或使用颜色映射策略来定制各个扇区的颜色。 2. **怎样让饼状图动态更新数据**? - 使用 Ajax 请求从服务器获取新数据,然后调用 `setOption()` 来更新图表的数据。 3. **如何增加饼状图的阴影效果使其更具立体感**? - 修改 `emphasis.itemStyle` 内部的属性如 `shadowBlur`, `shadowOffsetY` 等,以调整阴影的模糊程度、偏移量等,从而增强视觉效果。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值