需求:使用echarts实现柱状图温度变化效果实现,数据如下: funListT: [ { title:'最高温度', data:[ // {name:'工况1'}, { id: 1, name: "最高温度(T)", amount: 45, }, { id: 2, name: "工况1最高温度(T)", amount: 1.2, }, { id: 3, name: "工况2最高温度(T)", amount: 9.7, }, { id: 4, name: "工况3最高温度(T)", amount: 10.8, }, { id: 5, name: "工况4最高温度(T)", amount: 10.5, } ] }, { title:'最低温度', data:[ { id: 1, name: "最低温度(T)", amount: -10, }, { id: 2, name: "工况1最低温度(T)", amount: -0.5, }, { id: 3, name: "工况2最低温度(T)", amount: 6.5, }, { id: 4, name: "工况3最低温度(T)", amount:4.3, }, { id: 5, name: "工况4最低温度(T)", amount: 7.2, } ] } ],代码示例
时间: 2024-03-05 07:49:20 浏览: 24
可以使用以下代码实现:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
```javascript
// 数据
var funListT = [
{
title: "最高温度",
data: [
{ id: 1, name: "最高温度(T)", amount: 45 },
{ id: 2, name: "工况1最高温度(T)", amount: 1.2 },
{ id: 3, name: "工况2最高温度(T)", amount: 9.7 },
{ id: 4, name: "工况3最高温度(T)", amount: 10.8 },
{ id: 5, name: "工况4最高温度(T)", amount: 10.5 },
],
},
{
title: "最低温度",
data: [
{ id: 1, name: "最低温度(T)", amount: -10 },
{ id: 2, name: "工况1最低温度(T)", amount: -0.5 },
{ id: 3, name: "工况2最低温度(T)", amount: 6.5 },
{ id: 4, name: "工况3最低温度(T)", amount: 4.3 },
{ id: 5, name: "工况4最低温度(T)", amount: 7.2 },
],
},
];
// 渲染图表
var chart = echarts.init(document.getElementById("chart"));
var option = {
tooltip: {},
legend: {
data: ["最高温度", "最低温度"],
},
xAxis: {
type: "category",
data: funListT[0].data.map(function (item) {
return item.name;
}),
},
yAxis: {
type: "value",
},
series: [
{
name: "最高温度",
type: "bar",
data: funListT[0].data.map(function (item) {
return item.amount;
}),
},
{
name: "最低温度",
type: "bar",
data: funListT[1].data.map(function (item) {
return item.amount;
}),
},
],
};
chart.setOption(option);
```
这段代码使用了 echarts 库来实现柱状图的渲染,其中 `funListT` 是数据,`option` 是图表的配置,`chart.setOption(option)` 将配置应用到图表中,最终会在页面上显示柱状图。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)