type：bar和line的組合

option = {

{ 
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // type: 'shadow'
    },
    // label: {
    //   normal: {
    //     formatter: '{a} <br/>{b}: {c} ({d}%)',
    //   },
    //
    // },
    formatter: tooltipFormatter(['22']), //封裝的函式。是移入滑鼠時顯示的框子
    position(pos: any, params: any, dom: any, rect: any, size: any) { 
      // 滑鼠在左側時 tooltip 顯示到右側，滑鼠在右側時 tooltip 顯示到左側。
      return {
        top: 10,
        [['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
      };
    },
  },

  grid: {
    left: '3%',
    right: 0,
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  color: ['#f5b644'], // 修改折線圖的圖例顏色要寫在這裡(其他寫在lenged中)還要寫在lengend中
  legend: {
    data: ['名稱1', '名稱2'],
    textStyle: {
      fontSize: 8, // 設定文字大小
      color: ['#5abff', '#50aeff', '#f5b644'],
    },

    itemWidth: 7, // 設定標誌的小圖示
    itemHeight: 7,
    top: -5,
    align: 'left', // 圖例圖示的方向，這裡設定為左
    itemGap: -12, // 每項圖例的距離
    right: -10, // 圖例的位置
  },
  dataZoom: [
    {
      type: 'inside',
      start: 80,
      end: 100,
      filterMode: 'empty',
    },
  ],
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      splitNum: 3,
      axisLabel: {
        textStyle: {
          color: '#e9ecee',
        },
        fontSize: 8,
        margin: 2,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#9999ae',
        },
      },
      // nameLocation:'center',
      data: this.timeAry1,
    },
  ],
  yAxis: [ //這裡設定了2個Y軸（1個物件1個Y軸），分別給2個柱狀圖和2個折線圖使用，這樣的目的能夠解決當數值太小和數值太大之間的差距顯示效果。
    {
      type: 'value',
      // min: 0,
      // max: 300,
      show: true,
      splitNumber: 4, // 控制刻度標籤的數量
      axisTick: {
        show: false, // y軸的小刻度線
      },
      axisLabel: {
        show: false,
        formatter: '{value} %', //y軸顯示刻度值時顯示%
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#9999ae',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //設定網格線的顏色，可單獨設定
          color: '#4c4a74',
        },
      },
    },
    {
      type: 'value',
      show: true,
      // min: 0,
      max: 1,
      splitNumber: 4, // 控制刻度標籤的數量
      axisTick: {
        show: false, // y軸的小刻度線
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#9999ae',
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //設定網格線的顏色，可單獨設定
          color: '#4c4a74',
        },
      },
    },
  ],
  series: [
    {
      name: '名稱1',
      type: 'bar',
      barGap: 0, //柱狀圖之間的距離。只能在最後一個柱狀圖上寫生效
      barWidth: 10, //柱狀圖的寬度
      itemStyle: { //柱狀圖樣式設定。itemStyle即自身樣式，我的理解
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 1, color: '#0252ff' },
              { offset: 0, color: '#00ccff' },
            ],
          ),
          barBorderRadius: 3, //柱狀圖的radius
        },
      },
      data: data,
    },
    {
      name: '名稱2',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        // type: 'dotted',
        color: '#a96319',
      },
      yAxisIndex: 1, //使用這個Y軸的索引來判斷是關聯哪個y軸了，x軸理同，將y換成x即可（xAxisIndex），適用於多軸
      smooth: true, // 折線的順滑度
      data: data,
    },


  ],
}

}