使用echarts和vue2写一个柱状图和折线图一起展示数据的代码

<template>
<div class="chart">
<div ref="chart1" class="chart1"></div>
<div ref="chart2" class="chart2"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
data() {
return {
chartData: {
xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
seriesData1: [120, 200, 150, 80, 70, 110, 130],
seriesData2: [220, 180, 240, 100, 60, 90, 180]
}
}
},
mounted() {
this.renderChart1()
this.renderChart2()
},
methods: {
renderChart1() {
const chart = echarts.init(this.$refs.chart1)
const option = {
title: {
text: 'Bar Chart',
textStyle: {
color: '#333',
fontWeight: 'normal',
fontSize: 16
}
},
grid: {
top: 50,
left: 20,
right: 20,
bottom: 20
},
xAxis: {
type: 'category',
data: this.chartData.xAxisData,
axisLabel: {
color: '#999'
},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#999'
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
}
},
series: [{
type: 'bar',
data: this.chartData.seriesData1,
itemStyle: {
color: '#4d8ee6'
}
}]
}
chart.setOption(option)
},
renderChart2() {
const chart = echarts.init(this.$refs.chart2)
const option = {
title: {
text: 'Line Chart',
textStyle: {
color: '#333',
fontWeight: 'normal',
fontSize: 16
}
},
grid: {
top: 50,
left: 20,
right: 20,
bottom: 20
},
xAxis: {
type: 'category',
data: this.chartData.xAxisData,
axisLabel: {
color: '#999'
},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#999'
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
}
},
series: [{
type: 'line',
data: this.chartData.seriesData2,
itemStyle: {
color: '#e65c4d'
},
lineStyle: {
width: 2
},
areaStyle: {
color: '#ffe5e5'
}
}]
}
chart.setOption(option)
}
}
}
</script>

<style scoped>
.chart {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.chart1, .chart2 {
width: 45%;
height: 300px;
}
</style>