ECharts多折線圖——自定義懸浮提示框內容、自定義折線圖線條顏色、自定義y軸單位、氣泡單位，軸線顏色、圖表網格容器大小

如圖效果：

1、自定義tooltip懸浮提示框內容（數據處理後加單位），需要在tooltip配置項的formatter使用回調函數的形式
參數詳解：https://echarts.baidu.com/option.html#legend.formatter

2、自定義折線圖線條顏色，直接在color配置項數組中寫自己喜歡的顏色，在線條繪製的時候就會在數組中自動選擇。

3、自定義y軸單位和線條顏色，在yAxis中配置

4、自定義氣泡單位，在series 對應數據項的markPoint中設置

5、自定義網格容器大小，在grid中設置

具體如下配置：

option = {
    title: {
        text: '自定義echarts樣式'
    },
    tooltip : {
        trigger: 'axis',
        // axisPointer: { // 橫座標指示器
        //     type: 'cross',
        //     label: {
        //         backgroundColor: '#6a7985'
        //     }
        // },
        // 自定義懸浮提示框內容（數據處理後加單位）
        formatter (params) { // params的個數等於折線的條數（對多條折線數據進行加單位，就需要遍歷）
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              // circle變量是在數據前畫一個對應顏色的圓形
              let circle = `<i class="iconfont icon-yuan" style="margin-right:4px;font-size:14px;color:${params[i].color}">o</i>`
              if (params[i].value / 1000000 >= 1.0) {
                params[i].value = params[i].value / 1000000
                params[i].value = params[i].value.toFixed(2)
                relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Gbps'
              }else if (params[i].value / 1000 >= 1.0) {
                params[i].value = params[i].value / 1000
                params[i].value = params[i].value.toFixed(2)
                relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Mbps'
              } else {
                params[i].value = params[i].value.toFixed(2)
                relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Kbps'
              }
            }
            return relVal
        }
    },
    grid:{ // 直角座標系內繪圖網格,網格大小影響畫圖的大小（想鋪滿整個容器就全設置爲0，但是注意這樣會有些看不見了）
      left:'10%',
      // top:0,
      right:'2%',
      bottom:40
    },
    // 自定義線條顏色，所描繪的線條會在這裏選顏色渲染
    color: ['#409EFF', '#67C23A'],
    legend: {
        data:['帶寬','HTTPS帶寬']
    },
    toolbox: {
      feature: { // 各工具配置項：下載，刷新，圖表轉化等圖標功能
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false, // 座標軸兩邊留白策略
            data : ['週一','週二','週三','週四','週五','週六','週日'],
            //設置x軸線的屬性
            axisLine:{
              lineStyle:{
                color:'#409EFF'
              }
            } 
        }
    ],
    yAxis : [
        {
            // type : 'value'
            //設置y軸線的屬性
            axisLine:{
              lineStyle:{
                color:'#67C23A'
              }
            },
            axisLabel:{
                formatter:  (value) => { // 自定義y軸的單位
                  if (value / 1000000 >= 1.0) {
                    value = value / 1000000
                    value = value.toFixed(1)
                    return value + 'Gbps'
                  }else if (value / 1000 >= 1.0) {
                    value = value / 1000
                    value = value.toFixed(1)
                    return value + 'Mbps'
                  } else {
                    value = value
                    return value + 'Kbps'
                  }
                }
            }
        }
    ],
    series : [
        {
            name:'帶寬',
            type:'line',
            smooth: true, // 是否平滑曲線顯示
            data:[200.5, 300.20, 1200.02, 100.85, 189.02, 256.206, 345.96],
            markPoint: { // 最大、最小值氣泡
                data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ],
              label: { // 最大最小值標註上的自定義單位
                formatter (params) {
                  let relVal = ''
                  if (params.value / 1000000 >= 1.0) {
                    params.value = params.value / 1000000
                    params.value = params.value.toFixed(2)
                    relVal = params.value + 'Gbps'
                  }else if (params.value / 1000 >= 1.0) {
                    params.value = params.value / 1000
                    params.value = params.value.toFixed(2)
                    relVal = params.value + 'Mbps'
                  } else {
                    params.value = params.value.toFixed(2)
                    relVal = params.value + 'Kbps'
                  }
                  return relVal
                }
              }
            }
        },
        {
            name:'HTTPS帶寬',
            type:'line',
            smooth: true,
            data:[196.5, 500.40, 600.02, 210.25, 310.02, 156.103, 700.526]
        }
    ]
}