2020-05-06 Echarts常用设置的配置

Echarts官网的实例，样式往往不能符合我们平时的开发需求，对于自己平时遇到的经常需要修改的设置项总结如下：

1、柱状图去掉网格线：

 xAxis、yAxis分别加入这句话（Y轴为例，X轴同理）

  yAxis: {

              splitLine:{

                        show:false

                    }

}

2、去掉坐标轴刻度线：

 xAxis、yAxis分别加入这句话（Y轴为例，X轴同理）

  yAxis: {

      axisTick: {

        show: false

    }

}

3、修改坐标轴轴线样式：

 xAxis、yAxis分别加入这句话（Y轴为例，X轴同理）

  yAxis: {

     axisLine: {

              lineStyle: {

                  type: 'solid',

                  color: 'red',//左边线的颜色

                  width:'2'//坐标线的宽度

              },             

            }

   }

4、修改坐标轴文字样式：

 xAxis、yAxis分别加入这句话（Y轴为例，X轴同理）

 yAxis: {

   axisLabel: {

              textStyle:{

                color:'#7edae8',  //坐标的字体颜色

              },

}   

5、图例的设置：

 legend: {

          orient: 'horizontal',       //默认水平排列”horizontal“，想垂直排列改为”vertical“

          x: 'right', // 'center' | 'left' | {number},       //X轴方向位置

           y: 'top', // 'center' | 'bottom' | {number}     //Y轴方向位置

           itemGap: 20,          //间距

           textStyle: {color: 'red'},    //文字颜色

        },

6、柱状图柱子粗细设置：

  series: [

          barWidth : 20,      //柱子的粗细

]

7、柱状图的渐变色设置：

series: [

               itemStyle: {

                                normal: {

                                    color: new echarts.graphic.LinearGradient(

                                        [

                                            {offset: 1, color: '#83bff6'}, 

                                            {offset: 0, color: '#188df0'}

                                        ]

                                    )

                                }

                            },

]