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"] + "
" + params[0].marker + params[0]["seriesName"] + "  " + ":" + "  " + params[0]["data"] + "
" + params[1].marker + params[1]["seriesName"] + "  " + ":" + "  " + params[1]["data"] + "
" }, },

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' }] };