写一段vue里嵌入iviewui的代码,内容是一个领导驾驶舱,展现A、B、C三个银行1-4月的询价金额波动情况
时间: 2024-05-10 17:13:40 浏览: 13
Sure, 我可以给你提供这段代码。以下是一个基于Vue和iView UI的示例代码,用于展示领导驾驶舱中的三个银行在1-4月的询价金额波动情况。
```
<template>
<div>
<Row>
<i-col span="24">
<Card :bordered="false">
<div slot="title">
<h4>询价金额波动情况</h4>
</div>
<div style="height: 400px;">
<Chart :option="chartData" />
</div>
</Card>
</i-col>
</Row>
</div>
</template>
<script>
import { Row, iCol, Card, Chart } from 'view-design'
export default {
components: { Row, iCol, Card, Chart },
data () {
return {
chartData: {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['Bank A', 'Bank B', 'Bank C'],
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan', 'Feb', 'Mar', 'Apr']
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Bank A',
type: 'line',
data: [20, 30, 40, 10],
},
{
name: 'Bank B',
type: 'line',
data: [15, 25, 35, 5],
},
{
name: 'Bank C',
type: 'line',
data: [10, 20, 30, 4],
},
],
},
}
},
}
</script>
```
希望这样的示例可以为你提供参考,如果你还有其他疑问,随时问我。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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_column_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)