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

样式截图大概如下：

 

 

 

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. 完整代码示例如下：

   

var option = {
      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: [{
        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'
      }]
    };