vue折柱混合图，数据对应不同Y轴 - echart图表

介绍：

柱状图对应左侧Y轴，折线图对应右侧Y轴。

如图所示：

代码如下：

<template>
  <div class="ml20 mr20 mb20 colorFOp">
    <div class="head tc mb20 ">测试案例</div>
      <div ref="test" class="testChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myTestChart:{},
    };
  },
  mounted() {
    this.testChart()
    window.onresize = ()=>{ //窗口变化自动重载
      this.myTestChart.resize()
    }
  
  },
  methods: {
    //添加千分位
    formatCurrency(value){ 
      if (value == 0) return 0;
      if(value == ".") return '';
      if(value == "N/A") return 'N/A';
      if (!value) return '';
      let val = Number(value) // 提前保留两位小数
      let intPart = parseInt(val) // 获取整数部分
      let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      let floatPart = '0' // 预定义小数部分
      val = val.toString() // 将number类型转为字符串类型，方便操作
      let value2Array = val.split('.')
      
      if (value2Array.length === 2) { // =2表示数据有小数位
        floatPart = value2Array[1].toString() // 拿到小数部分
        return intPartFormat + '.' + floatPart
      } else {
        return intPartFormat
      }
    },
    testChart(){
      this.myTestChart = echarts.init(this.$refs.test);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {           
            type: 'shadow'       
          }
        },
        legend: {
          right: 10,
          top: 0,
          icon:'roundRect',
          itemWidth:14,
          itemHeight:14,
          textStyle:{//图例文字的样式
            color:'#fff',
            fontSize:12,
          },
          data: ['柱子','折线']
        },
        grid: {
          left: '15',
          right: '15',
          bottom: '5',
          top:'60',
          containLabel: true //防止标签溢出
        },
        xAxis: [
          {
            type: 'category',
            splitLine:{ //横线
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            },
            data: Array.from({length:4},(v,k)=>`${k+1}月`)
          }
        ],
        yAxis: [
          {
            name: '人次',
            nameTextStyle:{
              color:"#65ABE7", 
              fontSize:12,  
              padding:[0,0,0,30]
            },
            type: 'value',
            // inverse: true,//倒叙
            axisTick:{ //隐藏刻度
              show:false,
            },
            splitLine:{ //竖线
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            },
          }, 
          {
            name: '金额（元）',
            nameTextStyle:{
              color:"#65ABE7", 
              fontSize:12,  
            },
            type: 'value',
            position: 'right', //第二个y轴定位右侧
            splitLine:{ //竖线
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#3B3C71',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#F00067',//坐标值得具体的颜色
              }
            }
          },
        ],
        color:['#00CBDE','#F00067'],
        series: [{
          name: '柱子',
          type:'bar',
          data: [4,7,5,3],
          barWidth : 18,//柱图宽度
        },{
          name: '折线',
          type:'line',
          // symbol: 'none', //线上原点
          smooth: true, //平滑
          yAxisIndex: 1,//控制对应y轴；0代表第一个y轴，以此类推
          data: [9,4,6,3],
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myTestChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
  .testChart{
    margin:100px auto;
    width:850px;
    height: 50vh;
  }
  .title{
    font-size: 16px;
    color: #00F8FD;
    line-height: 42px;
  }
</style>