在vue2中添加一个按钮,功能为显示一个折线图
时间: 2024-05-27 08:10:41 浏览: 8
首先需要安装一个图表库,例如echarts。
安装方法:
```bash
npm install echarts --save
```
然后在需要使用图表的组件中引入echarts:
```javascript
import echarts from 'echarts'
```
在组件中添加一个按钮,点击按钮后显示折线图:
```html
<template>
<div>
<button @click="showChart">显示折线图</button>
<div ref="chart" style="height: 400px"></div>
</div>
</template>
```
在组件的methods中实现showChart方法,在该方法中初始化echarts实例,并配置数据和样式:
```javascript
methods: {
showChart() {
const chartDom = this.$refs.chart
const myChart = echarts.init(chartDom)
const option = {
title: {
text: '折线图示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}
]
}
myChart.setOption(option)
}
}
```
以上代码会在页面中添加一个按钮,点击该按钮后会显示一个折线图,如下图所示:
![折线图示例](https://i.imgur.com/sdGzgI1.png)
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)