option = 

{
  tooltip: {
    trigger: 'axis', 
    // axisPointer: {
    //   type: 'cross',
    //   label: {
    //     backgroundColor: '#6a7985',
    //   },
    // },
    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,
      };
    },
  },
  dataZoom: [　　//x軸是否可以滑動
 

    {
      type: 'inside',
      start: 50, //從50%開始顯示
      end: 100,　//到100%的位置　
      filterMode: 'empty',
    },
  ],
  color: ['#d77b09', '#54f0fd', '#296f04'],　　//想要設定折線圖的文字顏色（還是圖小圖示一起改動？），必須要在這裡寫
  legend: {
    data: ['名稱1', '名城2', {　　//這裡可以單獨設定圖例的配置
      name: '名城3',
      textStyle: {
        fontSize: 8,
        fontWeight: 'bolder',
        color: '#296f04',
      },
    }
 
],
    itemWidth: 6, //圖例小圖示的寬度，寬度和高度都為0時，小圖示不顯示
    itemHeight: 6, //圖例小圖示的高度
    textStyle: {
      fontSize: 8, // 設定圖例中文字大小
      color: ['#d77b09', '#54f0fd', '#296f04'],　　//設定圖例文字的顏色，如果是有折線圖，必須再在外面寫個color，如果這裡和外面寫了都沒效果，就單獨設定圖示中的data設定
    },
    itemGap: 0,
    top: -6,


  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {},
  //   },
  // },
  grid: {　　//這個是用來設定echarts圖示的位置和其他設定
 

    left: '-5%',
    // right: '4%',
    bottom: '11%',
    width: '110%',
    top: '20%',
    containLabel: true,　//一般都帶上這個，否則x,y軸的刻度值會被擷取掉
  },
  xAxis: [　　//x軸的設定
    {
      type: 'category',
      boundaryGap: true, //是否將x軸的刻度顯示在中間位置，false表示從0這個位置開始（最邊上）
      data: data,　　//x軸的資料
      axisTick: {　　//是否顯示刻度線
        show: false,
      },
      axisLabel: {　　//相關軸上的刻度值的設定，show:false，表示不顯示軸上的刻度值
        textStyle: { //刻度值的字型樣式設定
          color: '#e9ecee',
        },
        fontSize: 8,
        margin: 2,　　//刻度值離軸線多遠的距離
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      // min: 0, 
      // max: 300, //設定軸的最大值和最小值，一般不規定，可自適應
      show: false,　　//設定Y軸不顯示（軸線不顯示）
      splitNumber: 4, // 控制刻度標籤的數量
      axisTick: {    //軸線的小刻度線
        show: false, // y軸的小刻度線。這裡是不顯示
      },
      axisLabel: {  //設定刻度值
        show: false, //不顯示刻度值，如果不顯示，下面的刻度值設定就可以不用寫了
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      axisLine: { //設定軸線的配置
        show: false,
        lineStyle: { //軸線的線條顏色
          color: '#9999ae',
        },
      },
      splitLine: {　　//設定網格線，寫在哪個軸就是哪個軸的網格線
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //設定網格線的顏色，可單獨設定
          color: '#4c4a74',
        },
      },
    },
  ],
  series: [
    {
      name: '名稱1',
      type: 'line',
      stack: '總量',
      symbol: 'none', //取消折線上的小圓點
      smooth: true,  //使線條順滑
      itemStyle: { //折線的樣式設定
        normal: {
          lineStyle: { //折線線條的設定
            color: '#d77b09',
          },
        },
      },
      areaStyle: { //折線的區域樣式設定
        normal: {
          color: new LinearGradient( //區域顏色設定
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      data: data,
    },
    {
      name: '名稱2',
      type: 'line',
      stack: '總量',
      smooth: true,
      symbol: 'none',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#54f0fd',
          },
        },
      },
      areaStyle: {
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      data: data,
    },
    {
      name: '名稱3',
      type: 'line',
      stack: '總量',
      smooth: true,
      itemStyle: {
        normal: {
          color: '296f04', //折線上的小圓點顏色設定
          lineStyle: {
            color: '#296f04',
            // width: 1,  //折線的線條寬度
          },
        },
      },
      areaStyle: {
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      label: { //在折線上顯示相對應的數值
        normal: {
          show: true,
          position: 'top', //數值的位置
          distance: 0,　　//數值距離折線的距離
          fontSize: 8,  //數值的字型大小
          color: '#296f04', //數值的顏色
        },
      },
      data: data,
    },

  ],
};