echarts最简单的折线图与条形图结合

<div ref="writerEchart" style="width:692px;height:333px" />

import * as echarts from 'echarts';

  mounted() {
    // 这个必须等所有的dom挂载完毕之后再去初始化
    this.$nextTick(() => {
      this.createrEchart()
    })
  },

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

  createrEchart() {
      const chartDom = this.$refs.writerEchart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: 'rgba(0,0,0,0.75)',
          borderColor: 'transparent',
          textStyle: {
            color: '#FFF'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['文案触发数', '客户挂机占比', '跳转知识库占比']
        },
        xAxis: {
          type: 'category',
          data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        yAxis: [
          {
            type: 'value',
            position: 'right',
            alignTicks: true,
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            type: 'value',
            position: 'left',
            alignTicks: true,
            axisLabel: {
              formatter: '{value} 个'
            }
          }
        ],
        series: [
          // 条形图
          {
            name: '我是条形图',
            type: 'bar',
            data: [100, 200, 150, 300, 250],
            yAxisIndex: 0,
            itemStyle: {
              color: '#58C3FE'
            }
          },
          {
            name: '我是折线图',
            type: 'line',
            data: [20, 30, 25, 40, 35],
            yAxisIndex: 1,
            smooth: true,
            itemStyle: {
              color: '#FF4F77 '
            }
          },
          {
            name: '我是折线图',
            type: 'line',
            data: [15, 50, 15, 20, 15],
            yAxisIndex: 1,
            smooth: true,
            itemStyle: {
              color: '#FFA907'
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },