echarts柱状图boundarygap（echarts柱状图的样式调整及应用）

一    
    
    
、在项目中引进echarts

       echarts官网：快速上手 - Handbook - Apache ECharts
    
    
    
，点击左侧导航栏的“入门篇    
    
    
”中的“在项目中引入 Apache ECharts 


     


     


     ”可在项目中引进echarts

二 


     


     


     、查看调整样式的代码

      在官网页头中的“文档

 




 




 



”下方的“配置项手册   

   

   

”中可查看调整样式的代码

三

 




 




 



、以下代码涉及到的问题：

1   

   

   

、延长x轴  

     

     

    、y轴轴线


  




  




  


、修改轴线颜色并给轴线添加箭头（详细代码见axisLine部分）；

2  


  


  


、x轴   
     
     
   、y轴文字颜色



   




   




   

、大小修改；

3 



 



 



、平行于x轴的markline的起点和终点图标的样式和大小调节     


     


     


，以及markline线条宽度和颜色的修改；

4                、markline的文字的颜色




    




    




    
、大小 




 




 




 ，边距修改

四：代码部分

option = {

 xAxis: { //x轴

  type: "category",

  splitLine: { //坐标轴背景虚线

      show: true, //显示

      lineStyle: { //坐标轴背景线

          type: dashed, //虚线

  },

},

  data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],  //坐标轴上显示的文字

   axisLabel: { //坐标轴上文字样式设置

      show: true,  //显示x轴上的文字

      interval: 0, //x轴坐标的文字间隔

      textStyle: { //x轴坐标的文字样式

       fontSize: 12,  //x轴坐标的文字大小

       color: rgba(85, 88, 95, 1) //x轴坐标的文字颜色

      },

      padding: [0, 0, 0, 50]  //坐标轴名字向右偏移

     },

     nameLocation: end,  //标题位置 

     axisTick: false,// 隐藏刻度代码

     axisLine: { //箭头

      symbol: [none, triangle], //只在末端显示箭头

      symbolOffset: 30, // 偏移距离

      symbolSize: [10, 15], // 箭头宽高

      lineStyle: { //x轴轴线样式

       shadowOffsetX: 30,    //利用阴影进行反向延长

       shadowColor: #d3d5d9,  //设置阴影的颜色

       color: #d3d5d9, // 坐标轴颜色

      },

     },

 },

 yAxis: {

   type: value,

     splitLine: { //坐标轴虚线

      show: true,

      lineStyle: {

       type: dashed

      },

     },

     axisTick: false,// 隐藏刻度代码

     axisLabel: { //坐标轴上文字

      show: true,

      textStyle: { //y轴坐标的文字样式

       fontSize: 14, //y轴坐标的文字大小

       color: rgba(85, 88, 95, 1) //y轴坐标的文字颜色

      },

     },

     axisLine: { //箭头

      symbol: [none, triangle], //只在末端显示箭头

      symbolOffset: 30, // 偏移距离

      symbolSize: [10, 15], // 箭头宽高

      lineStyle: { //y轴轴线样式

       shadowOffsetY: -30,    //利用阴影进行反向延长

       shadowColor: #d3d5d9,  //设置阴影的颜色

       color: #d3d5d9, // 坐标轴颜色

      },

     },

 },

 series: [{

  data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据

  type: "bar", //图形类型：柱状图 是bar

  markLine: {  //图表标线

    lineStyle: { //图表标线样式

     cap: "butt",

     type: "solid",

     width:2, //线宽

    },

    symbol: ["triangle","diamond"], //起点和终点图标

    symbolRotate:-90, //旋转-90度

    symbolSize: 20,//起点和终点图标的大小 也可用数组控制[宽度（垂直坐标轴方向

   

   

   
，高度（平行坐标轴方向）]

    data: [{

       lineStyle: { //图表标线样式

        color:"#FEBD68", //图表标线颜色

       },

       yAxis: 1000,

       //symbolOffset: [0,-5],//轴线两边的箭头的偏移     

     

     

，如果是数组  




  




  




 ，第一个数字表示起始箭头的偏移


  


  


  
，第二个数字表示末端箭头的偏移；如果是数字     
     
     
，表示这两个箭头使用同样的偏移
    
    
    
。

       symbolSize: 12, //轴线两边的箭头的大小

       label: {

        normal: {

         show: true,

         formatter: 倾向, //图表标线文字内容

         height: 20,

         textStyle: { //图表标线的文字样式

          fontSize: 12, //文字大小

          color: #55585f, //文字颜色

          fontWeight: bold,

          padding:[0,0,0,10], //文字边距

         }

        },

        size: 30

       }

      }, {

       lineStyle: { //图表标线样式

        color:"#FF6C4B" //图表标线颜色

       },

       yAxis: 1100,

       symbolSize: 12,  //轴线两边的箭头的大小

       label: {

        normal: {

         show: true,

         formatter: 是, //图表标线文字内容

         textStyle: {  //图标标线的文字样式

          fontSize: 12, //文字大小

          color: #55585f, //文字颜色

          fontWeight: bold,

          padding:[0,0,0,10],//文字边距

         }

        },

         type: "average",

       },

      }],

  }

 }]

}

五：成果展示 

1














、下面是在官网的示例中生成的图片   




   




   




 ，其中y轴轴线未显示（目前不清楚原因）

 2                、下面是我自己的页面生成的样式



 



 



 
，其中图片渐变色是在 series中写的其它方法               ，代码未贴上来     


     


     


。

【实现渐变色可参考：(69条消息) echarts 柱状图颜色及渐变色设置_echarts柱状图渐变色_Mr.Meng_95的博客-CSDN博客】