给以下代码中的兆瓦一个样式let data = [ { "column1": "机组类型;风电、光伏、分布式", "column2": "Sum_装机容量;单位:万千瓦" }, { "column1": "风电", "column2": "11000.0" }, { "column1": "光伏", "column2": "5400.0" }, { "column1": "煤电", "column2": "83700.0" }, { "column1": "燃气", "column2": "34260.0" } ]; data.forEach(item => { item.column2 = parseFloat(item.column2); }); let total = data.reduce((prev, curr) => prev + curr.column2, 0); var option = { title: { text: '', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c}兆瓦', }, series: [ { name: '比例', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, labelLine: { show: false }, data: data.map(item => { return { name: item.column1, value: item.column2, label: { show: true, position: 'top', formatter: '{c|{c}兆瓦}\n{b|{b}}', rich: { b: { color: '#000', align: 'center', fontSize: 12, lineHeight: 40 }, c: { color: '#000', align: 'center', fontSize: 16, lineHeight: 10 } } }, }; }) } ] };
时间: 2024-02-14 15:13:21 浏览: 68
以下是兆瓦的样式代码:
```
let data = [
{
"column1": "机组类型;风电、光伏、分布式",
"column2": "Sum_装机容量;单位:万千瓦"
},
{
"column1": "风电",
"column2": "11000.0"
},
{
"column1": "光伏",
"column2": "5400.0"
},
{
"column1": "煤电",
"column2": "83700.0"
},
{
"column1": "燃气",
"column2": "34260.0"
}
];
data.forEach(item => {
item.column2 = parseFloat(item.column2);
});
let total = data.reduce((prev, curr) => prev + curr.column2, 0);
var option = {
title: {
text: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}兆瓦',
},
series: [
{
name: '比例',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: data.map(item => {
return {
name: item.column1,
value: item.column2,
label: {
show: true,
position: 'top',
formatter: '{c|{c}兆瓦}\n{b|{b}}',
rich: {
b: {
color: '#000',
align: 'center',
fontSize: 12,
lineHeight: 40
},
c: {
color: '#000',
align: 'center',
fontSize: 16,
lineHeight: 10
}
}
},
};
})
}
]
};
```
这段代码使用了 echarts.js 库来生成一个饼图,展示了不同机组类型的装机容量占比。其中,通过对数据进行处理,将装机容量的字符串转换成了浮点数,方便后续计算。在饼图的标签中,通过 rich 属性设置了富文本,使得标签中的兆瓦数和机组类型可以分别用不同的字体样式显示。
阅读全文