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'
              }
            },
            splitLine :{    // 设置网格线
                lineStyle:{
                    type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show:true //隐藏或显示
            },
            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]
        }
    ]
}