用echarts和vue2实现柱状图和折线图结合使用

以下是一个使用echarts和vue2实现柱状图和折线图结合使用的示例代码，你可以根据自己的需求进行修改和调整：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      chartData: {
        xAxisData: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        seriesData1: [320, 332, 301, 334, 390, 330, 320, 330, 350, 380, 360, 390],
        seriesData2: [220, 182, 191, 234, 290, 330, 310, 320, 330, 300, 280, 260]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Series1', 'Series2']
        },
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData
        },
        yAxis: [{
          type: 'value',
          name: 'Series1',
          position: 'left',
          axisLabel: {
            formatter: '{value} units'
          }
        }, {
          type: 'value',
          name: 'Series2',
          position: 'right',
          axisLabel: {
            formatter: '{value} units'
          }
        }],
        series: [{
          name: 'Series1',
          type: 'bar',
          data: this.chartData.seriesData1
        }, {
          name: 'Series2',
          type: 'line',
          yAxisIndex: 1,
          data: this.chartData.seriesData2
        }]
      })
    }
  }
}
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 80%;
  height: 80%;
}
</style>

在这个示例代码中，我们首先引入了echarts依赖，然后在data中定义了需要展示的图表数据。在mounted方法中，我们调用了initChart方法，创建了一个echarts实例并初始化了图表。 在initChart方法中，我们使用了echarts的API来配置了图表的tooltip、legend、xAxis、yAxis和series等属性，最终使用setOption方法将图表配置应用到了echarts实例中。 在样式方面，我们在容器元素和图表元素上设置了一些基本的样式。