vue当中画两条折线
时间: 2023-10-06 12:05:36 浏览: 54
要在Vue中画两条折线,你可以使用echarts库来实现。首先,在HTML中创建一个包含折线图的容器,比如<div id="myChart1"></div>。然后,在Vue的methods中添加一个方法,比如getLine,用于初始化和绘制折线图。在这个方法中,使用echarts.init来初始化图表实例,并通过document.getElementById('myChart1')来获取容器元素。然后,使用myChart1.setOption来设置图表的配置项,包括tooltip、legend、xAxis、yAxis和series等。其中,xAxis和series中的data和data属性分别表示x轴和折线的数据。你可以根据实际需求修改数据和配置项。最后,在Vue的mounted钩子函数中调用getLine方法,以确保在组件渲染完成后执行绘制折线图的操作。以下是一个示例代码:
```html
<!-- 在Vue模板中添加折线图容器 -->
<div id="myChart1"></div>
```
```javascript
// 在Vue的methods中添加getLine方法
methods: {
getLine() {
let myChart1 = echarts.init(document.getElementById('myChart1'));
myChart1.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
y: 'bottom',
x: 'center',
data:['A','B']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'A',
type:'line',
stack: '总量',
data: [3, 54, 65, 43, 24, 5]
},
{
name:'B',
type:'line',
stack: '总量',
data: [43, 5, 33, 23, 54, 53]
}
]
});
}
},
mounted() {
this.getLine();
}
```
这样就可以在Vue中画出两条折线了。请注意,以上代码仅为示例,你需要根据实际情况进行修改和适配。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue + echarts 多条折线图](https://blog.csdn.net/m0_37852904/article/details/89888602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [浏览器显示数据库中数据的条形图柱状图 前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 ...](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]