处理数据绘制环形图,var options={ data:[ { "column1": "自用资金", "column2": 4511 }, { "column1": "自用资金11", "column2": 2222 }, { "column1": "自用资金222", "column2": 3333 } ]}图列在底下竖列展示
时间: 2023-07-12 21:54:52 浏览: 56
您可以将原始数据转换成 ECharts 需要的格式,然后再绘制环形图。具体操作如下:
1. 引入 ECharts 库
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
```
2. 准备容器
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
3. 编写 JavaScript 代码
```javascript
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
// 定义原始数据
var data = {
data: [
{ "column1": "自用资金", "column2": 4511 },
{ "column1": "自用资金11", "column2": 2222 },
{ "column1": "自用资金222", "column2": 3333 }
]
};
// 转换数据格式
var chartData = data.data.map(function(item) {
return { name: item.column1, value: item.column2 };
});
// 定义选项
var options = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: chartData.map(function(item) { return item.name; })
},
series: [
{
name: '资金占比',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: chartData
}
]
};
// 使用指定的配置项和数据显示图表
chart.setOption(options);
```
这样就可以绘制出一个带有图列在底下竖列展示的环形图了。