echart相关操作xAxis,yAxis,series,grid,(包括x轴样式，y轴样式，折现样式，网格样式，折现阴影，折线上方显示数据，x轴文字倾斜，图例，标题， tooltip文字自定义)

样式截图大概如下：

1. x，y轴相关操作：xAxis，yAxis

(1)  x，y轴的颜色：

axisLine: {
       lineStyle: {
         color: '#2898e5',
        },
      },

(2) x，y轴文字颜色：

axisLabel: {
      show: true,
      textStyle: {
       color: '#019bf8'
      }
     }

（3）x，y轴刻度颜色：

axisTick: {
     lineStyle: { color: '#2898e5' } 
    }

(4) x，y轴坐标文字太长显示不全：,倾斜rotate

axisLabel: {
     show: true,
     interval: 0,
     rotate: 20
 },

（5）x ,y 轴网格线的颜色：

splitLine: {
     show: true,
     lineStyle: {
      color: ['rgb(1,155,246,0.3)'], //网格线
      width: 1,
     }
 },

2. 折现 的样式

（1） 折现的平滑度series：

symbol: 'circle', //实心点
symbolSize: 6,   //实心点的大小
smooth: true,   //折现平滑

（2）折现的颜色：

itemStyle: {
     normal: {
      color: 'transparent'
     }
    },

（3）折现阴影变色：

areaStyle: {
     normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
       offset: 0,
       color: 'rgb(52,214,145)' //渐变上边颜色
      }, {
       offset: 1,
       color: 'transparent'   //渐变下边颜色
      }])
     }
    },

（4）折线上方显示文字：

label: {
     normal: {
      show: true,
      position: 'top', //头上显示数据
      color: 'rgb(0,255,255)' //显示文字颜色
     }
  },

3. grid图区域距离四周的距离：

在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,      但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;

grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true
 },

4. 图例添加以及设置

legend: {
  data: ["图例1", "图例2", "图例3"],
  icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，  
            //  diamond，pin，arrow，none
  itemWidth: 10,  // 设置宽度
  itemHeight: 10, // 设置高度
  itemGap: 40， // 设置间距
  orient: 'vertical', //vertical是竖着显示 ，默认是横着
  left: '70%',  //距离左边70%，也可用left,center,right
  y: 'center',  //上下居中显示，也可以用百分比 
  textStyle:{  //图例文字设置
           fontSize: 18,//字体大小
           color: '#ffffff'//字体颜色
        }

}

注：图例跟series的name要保持一致，否则图例不出来

5. echarts的标题

title: {
     text: '今日排放总量与昨日对比', //标题
     subtext: '2019-1-28',     //小标题
     x: 'center',          //左右距离
     y: '30%',           //上下距离
     itemGap: 10,          //间距
     textStyle: {          //文字设置
      color: 'rgba(30,144,255,0.8)',
      fontFamily: '微软雅黑',
      fontSize: 12,
      fontWeight: 'bolder'
     }
 },

6. tooltip自定义设置

res是测试循环数据，为了自定义中tooltip中标题和x轴文字不相同（但是还是这一条数据的name,x轴是id,这一操作防止x轴过长             用数字代替，但是鼠标移入还是要显示正确的name）

其余的都是正常的数据显示，params[0].marker是显示的文字前的图形

var res=[]; 
 for (var i = 1; i < 21; i++) {
   res.push({
    id:i,
    name: "任务" + i
   })
 }

tooltip: {
    trigger: 'axis',
    formatter: function (params) {
     console.log(params[0]);
     return "    " + res[params[0]["dataIndex"]]["name"] + "<br>" + params[0].marker + params[0]["seriesName"] + "  " + ":" + "  " + params[0]["data"] + "<br>" + params[1].marker + params[1]["seriesName"] + "  " + ":" + "  " + params[1]["data"] + "<br>"
    },
   },

7. 完整代码示例如下：

var option = {
 tooltip: {
      trigger: 'axis'
     },
 title: {
     text: '今日排放总量与昨日对比', //标题
     subtext: '2019-1-28',     //小标题
     x: 'center',          //左右距离
     y: '30%',           //上下距离
     itemGap: 10,          //间距
     textStyle: {          //文字设置
      color: 'rgba(30,144,255,0.8)',
      fontFamily: '微软雅黑',
      fontSize: 12,
      fontWeight: 'bolder'
     }
  },
  legend: {
   data: ["图例1"],
   left: 'cnter',  //距离左边70%，也可用left,center,right
   },
   xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['福州市', '无锡市', '兰州市', '合肥市', '广州市', '贵阳市', '长沙市'],
    axisLine: {    
     lineStyle: {    
      color: '#2898e5',  //轴颜色
     },

    },
    axisLabel: {   
     interval: 0,
     rotate: 40,  //倾斜度
     show: true,
     textStyle: {   //轴上文字
      color: '#019bf8'  //颜色
     }
    },

    axisTick: {
     lineStyle: { color: '#2898e5' },  // 刻度的颜色
    },

   },
   grid: {      //距离
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true  //保留文字距离
   },
   yAxis: {
    type: 'value',
    axisLine: {
     lineStyle: {
      color: '#2898e5', //轴
     },
    },
    axisLabel: {
     show: true,
     textStyle: {
      color: '#019bf8' //轴字体
     }
    },
    splitLine: {
     show: true,
     lineStyle: {
      color: ['rgb(1,155,246,0.3)'], //网格线颜色
      width: 1,
     }
    },
    axisTick: {
     lineStyle: { color: '#2898e5' }  // x轴刻度的颜色
    }

   },
   series: [{
    name: '图例1',
    data: [1000, 920, 856, 601, 934, 1090, 802, 1000],
    symbol: 'circle',   //折线拐点实心圆
    symbolSize: 6,    //实心圆大小
    smooth: true,     //折线平滑
    label: {        
     normal: {
      show: true,
      position: 'top', //折线上方显示数据
      color: 'rgb(0,255,255)'
     }
    },
    itemStyle: {
     normal: {
      color: 'rgb(0,255,255)'  //折线颜色
     }
    },
    areaStyle: {   //阴影颜色
     normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
       offset: 0,
       color: '#019bf8'  //渐变色上方颜色
      }, {
       offset: 1,
       color: 'transparent'  //渐变色下方颜色
      }])
     }
    },
    type: 'line'
   }]
  };