vue echarts 柱状图和折线图的组合

柱状图和折线图的组合代码如下：

<template>
  <div>
    <div 
      id="barLineChart" 
      ref="barLineChartRef" 
      style="width: 100%; height: 450px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'positonStockTrunoverRate',
  components: {},
  props: {},
  data () {
    return {
      chart: null,
      _thisForChart: null,
      _thisForWindow: null,
      barLineChartData: {},
    }
  },
  created () {},
  mounted() {
    this.$nextTick(() => {
      this.initBarLineChart()
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    })
  },
  beforeDestroy () {
    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()
  },
  computed: {},
  watch: {},
  methods: {
    initBarLineChart() {
      var chartDom = document.getElementById('barLineChart');
      this.chart = echarts.init(chartDom);
      let option = {
        // color: ['#57a1ff','#e58a96'],
        color: ['#57a1ff','#eb9912'],
        legend: {
          x: 'left',
          y: 'bottom',
          padding: [0, 0, 0, 25],
          itemWidth: 15, // 图例标记的图形宽度
          itemHeight:8, // 图例标记的图形高度
          data: [
            {name: '换手率', icon: 'circle'},
            {name: '全部换手率中位数',icon: 'rect'}
          ]
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '12%',
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba( 0, 0, 0,0.7)',
          borderColor: 'rgba( 0, 0, 0,0.7)',
          formatter:function(params) {
            var str = params[0].name + '</br>'
            for(let item of params) {
              str = `<span style='color: #fff;'>${str}</span><div style='display:flex;align-items:center;justify-content:space-between;'><span>${item.marker}<span style='color: #fff;'>${item.seriesName}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${item.value}%</span></div>`
            }
            return str;
          }
        },
        xAxis: {
          data: [ 
            '2019-01',
            '2019-02',
            '2019-03',
            '2019-04',
            '2019-05',
            '2019-06',
            '2019-07',
            '2022-01',
            '2022-02',
            '2022-03',
          ],
          axisLabel: {
            show: true,
            color: '#606266',
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '',
            }
          },  
        },
        yAxis: {
          name: '换手率：%',
            nameTextStyle: {
              color: '#000',
              padding: [0, 0, 0, -10] // 上右下左的间距，单位为像素
            },
          axisLabel: {
            show: true,
            color: '#000',
            formatter: (value) => {
              return `${value}%`
            }
          },
          splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
        },
        series: [
          {
            name: "换手率",
            
            type: "bar", 
            data: [5, 20, 36, 10, 10, 20,33,16,52,10] 
          },
          {
            name: "全部换手率中位数",
            type: "line",
            symbol: 'none',
            // smooth: true,
            itemStyle: {
              normal: {
                color: "#eb9912"
              }
            },
            data: [5, 20, 36, 10, 10, 20,77,16,52,10] 
          }
        ]
      }
      this.chart.setOption(option,true);
    },



     // 监听侧边栏导航的宽度发生变化
     addEventListenerToSidebarContainer(_this) {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = _this;
      sidebarContainer &&
        sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
    },
    removeEventListenerToSidebarContainer() {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },
  },
}
</script>

<style lang="scss" scoped>
  
</style>

展示效果图如下：