You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/03/18 07:04:02 UTC
[GitHub] [incubator-echarts] zl7261 opened a new issue #12294: formatter函数的使用方式并不统一
zl7261 opened a new issue #12294: formatter函数的使用方式并不统一
URL: https://github.com/apache/incubator-echarts/issues/12294
### Version
4.1.0-release
### Steps to reproduce
tooltip.formatter的回调函数支持使用html元素与样式,可以实现比较复杂的样式
legend的formatter函数仅支持文本,
而legend.tooltip.formatter函数又与tooltip.formatter的使用是一致的
### What is expected?
formatter的回调函数写法都能使用html元素
### What is actually happening?
legend的formatter函数仅支持文本
---
code for https://www.echartsjs.com/examples/zh/editor.html
```javascript
let seriesData=[
{value: 335, name: '直接访1问'},
{value: 310, name: '邮件营4销'},
{value: 234, name: '联盟广告33'},
{value: 135, name: '视频广告22'},
{value: 1548, name: '搜索引擎123'}
]
option = {
tooltip: {
trigger: 'item',
formatter:(param) => {
let {color, data, percent} = param
let name = data.name
let value = data.value
return `<div style="display: flex;align-items: baseline;justify-items: baseline">
<div style="margin-right: 10px;border-radius:10px;width:12px;height:12px;background-color:${color}"></div>
${name}<br/>
${value}台 (${percent}%)
</div>`
}
},
legend: {
orient: 'vertical',
left: 10,
formatter: (name) => {
if (!Array.isArray(seriesData)) {
return
}
const reducer = (accumulator, currentValue) => accumulator currentValue.value
const sum = seriesData.reduce(reducer, 0)
let itemData = seriesData.find(item => item.name === name)
let targetValue = itemData ? itemData.value : null
let p = (targetValue / sum * 100)
if (isNaN(p)) {
p = 0
}
p = p.toFixed(2)
// should return this ,
// but can't handle text-align iussue
// return `${name} | ${p}% |${targetValue}`
return `<div style="display:table-row">
<div style="display:table-cell">${name}</div>
<div style="display:table-cell"> ${p}%</div>
<div style="display:table-cell">${targetValue}</div>
</div>`
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}
]
};
```
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on issue #12294: formatter函数的使用方式并不统一
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #12294: formatter函数的使用方式并不统一
URL: https://github.com/apache/incubator-echarts/issues/12294#issuecomment-600612673
只有 tooltip 支持 html 格式的 formatter，其它的都只支持 echarts 内置的富文本格式化
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang closed issue #12294: formatter函数的使用方式并不统一
Posted by GitBox <gi...@apache.org>.
pissang closed issue #12294: formatter函数的使用方式并不统一
URL: https://github.com/apache/incubator-echarts/issues/12294
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] zl7261 commented on issue #12294: formatter函数的使用方式并不统一
Posted by GitBox <gi...@apache.org>.
zl7261 commented on issue #12294: formatter函数的使用方式并不统一
URL: https://github.com/apache/incubator-echarts/issues/12294#issuecomment-600519653
已解决
formatter 返回textStyle需要的格式
```javascript
return (
`{name|${name}} {percent|${percent}%} {value|${targetValue}}`
)
```
再在textStyle.rich中设置宽度
可实现对齐的效果
```json
textStyle: {
rich: {
name: {
color: '#333333',
width: 60
},
percent: {
color: '#333333',
width: 60
},
value: {
fontSize: 18
}
}
}
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang edited a comment on issue #12294: formatter函数的使用方式并不统一
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #12294: formatter函数的使用方式并不统一
URL: https://github.com/apache/incubator-echarts/issues/12294#issuecomment-600612673
只有 tooltip 支持 html 格式的 formatter，其它的都只支持 echarts 内置的富文本格式
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org