需求:使用echarts环形图,根据数据: funListT01: [ { id: 1, name: "平台母线直供电(路)", amount: 1, }, { id: 2, name: "平台母线控制供电(路)", amount: 90, }, 实现一个页面展示多个环形图
时间: 2024-02-10 11:08:00 浏览: 30
好的,您可以按照以下步骤来实现:
1. 在页面上引入 echarts 库。
2. 准备数据,将 funListT01 数据转换为 echarts 环形图所需的数据格式。数据格式类似于:
```
const data = [
{value: 1, name: '平台母线直供电(路)'},
{value: 90, name: '平台母线控制供电(路)'},
];
```
3. 在页面上创建多个 div 元素,用于展示多个环形图。
4. 在 JavaScript 中,使用 echarts.init 方法初始化每个 div 元素对应的 echarts 实例。
5. 配置每个实例的 option,包括图表类型、数据、颜色、标题、图例等。
6. 使用实例的 setOption 方法将配置应用到图表中。
代码示例如下:
```html
<body>
<div id="chart1" style="width: 400px; height: 400px;"></div>
<div id="chart2" style="width: 400px; height: 400px;"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
const funListT01 = [
{
id: 1,
name: '平台母线直供电(路)',
amount: 1,
},
{
id: 2,
name: '平台母线控制供电(路)',
amount: 90,
},
];
const data1 = funListT01.map(item => ({ value: item.amount, name: item.name }));
const data2 = funListT01.map(item => ({ value: item.amount * 2, name: item.name }));
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));
chart1.setOption({
title: {
text: '图表1',
},
tooltip: {},
series: [
{
type: 'pie',
data: data1,
},
],
});
chart2.setOption({
title: {
text: '图表2',
},
tooltip: {},
series: [
{
type: 'pie',
data: data2,
},
],
});
</script>
```
以上代码将在页面上展示两个环形图,每个图表展示的数据都是 funListT01,但第二个图表的数据是每个数据项的值乘以 2。您可以根据需要修改数据和样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)
![](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/20210720083736.png)