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博客】

代码007普通

打赏 收藏 海报 链接