Echarts折线+柱状图的多y轴

实现效果：

代码：

<template>
    <div class="test-echart">
        <div id="barLineChart" ref="barLineChart" :style="barLineStyle"></div>
    </div>
</template>
<script>
// import * as echarts from 'echarts' // 方法2 局部引用
export default {
 data () {
    return {      
      barLineStyle: { height: '460px', with: '100%' }, // echarts的样式
      // colors: ['#5793f3', '#d14a61', '#675bba'],
      barLineOption: {
        color: ['#acf', '#fbc', '#baf'],
        title: {
          text: '自定义的折柱图多y轴混合--BarLine',
          left: 'center',
          y: '10',
          textStyle: {
            color: '#888'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        grid: {
          top: '20%',
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['蒸发量', '降水量', '平均温度'],
          top: '10%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisPointer: {
              label: {
                backgroundColor: '#bda' // 鼠标移入x轴线对应的文字背景色
              }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '蒸发量',
            min: 0,
            max: 250,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#acf'
              }
            },
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '降水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLine: {
              lineStyle: {
                color: '#fbc'
              }
            },
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#baf'
              }
            },
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '降水量',
            type: 'bar',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }
    }
 },
 mounted () {
   this.$nextTick(() => {
     this.getEcharts()
   })
 },
 methods: {
    // 获取趋势折线图
    getEcharts () {
      // 此处本来是直接调用接口的，这里就写点假数据

      if (this.$refs.barLineChart) {
        // 遇到数据更新，视图未更新两种解决方法 --解决echarts数据更新，页面不刷新问题
        // 1.添加 barLinecharts.clear()
        // // const barLinecharts = echarts.init(this.$refs.barLineChart)
        // const barLinecharts = this.$echarts.init(this.$refs.barLineChart)
        // barLinecharts.clear()
        // // 对实例对象进行配置
        // barLinecharts.setOption(this.barLineOption)
        // ------
        // 2. setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面的效果。
        // const barLinecharts = echarts.init(this.$refs.barLineChart)
        const barLinecharts = this.$echarts.init(this.$refs.barLineChart)
        barLinecharts.setOption(this.barLineOption, true)
      }
   }
 }
}
</script>
<style lang="scss" scoped>
.test-echart {
  width: 100%;
  height: 500px;
}
</style>