echarts 饼图显示上面的数据添加千分位 使用toLocaleString() 方法后界面上直接显示toLocaleString字样
时间: 2024-02-19 07:03:53 浏览: 126
如果使用 `toLocaleString()` 方法后界面上直接显示 `toLocaleString` 字样,可能是因为该方法返回的是一个字符串,而不是一个数字。在 Echarts 中,需要对该数字进行格式化,然后将格式化后的字符串作为饼图的数据展示。
例如,假设要将数据中的数字添加千分位并显示在饼图上,可以使用以下代码:
```javascript
// 假设数据为 dataArr
var data = dataArr.map(function(item) {
return item.toLocaleString();
});
// 使用 Echarts 的 options 进行配置
var option = {
title: {
text: '饼图示例',
left: 'center'
},
series: [
{
name: '数据',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
```
在这里,首先使用 `map()` 方法将数据中的每个数字都使用 `toLocaleString()` 方法进行格式化,然后将格式化后的字符串作为饼图的数据,最后将该数据添加到 Echarts 的 `option` 对象中的 `series` 数组中即可。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)