echarts-3 基于Basic Bar柱状图的样式修改

讲了两篇废话终于来到正文了=。=

先来说说我第一次引入的柱状图——Basic Bar

Basic Bar

是长这样子的，现在我们给它变个样子。
1、找到修改柱状的参数；将柱状修改细小一点,在柱条上方添加圆角属性,颜色渐变色。
2、修改Y轴上的参数，使之变成我们需要的参数；修改Y轴上线条的样式。
3、填充数据，将七组数据变成十二组。
4、调整网格的位置。
在图改中需要用到的参数：

英语单词

1.grid: n. 网格，方格；栅栏；
2.series: n. 连续，一系列（事件）；
3.axis: n. 轴，轴线；对称中心线，对称轴；
4.split： v. 分裂，使分裂（成不同的派别）；分开，使分开（成为几个部份）；

修改样式

1、修改柱条形状

echart 渐变内置生成器——echarts.graphic.LinearGradient

在使用echarts绘制图表时, 如果需要渐变色时使用。
有5个参数：
前4个参数用于配置渐变色的起止位置, 依次对应右/下/左/上四个方位. 0 0 0 1表示渐变色从正上方开始。
第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色

serises:[
{
type:bar,
barWidth: 22,               //改变柱条的宽度大小
borderRadius:[12,12,0,0],  //增加圆角属性
itemStyle: {              //这里使用了echarts 渐变内置生成器
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [      //可以看到这里的写法有点类似于
      { offset: 0, color: '#4AC0FF' },                          //css动画@keyframes的写法      
      { offset: 0.5, color: '#2987DC' },
      { offset: 1, color: '#2987DC' }
    ]),
  },
}
]

2、修改Y轴参数

yAxis: {
  min: 0,                               //Y轴参数最小值
  max: 1000,                           //Y轴参数最大值
  splitNumber: 5,                     //最大值最小是均分份数，即Y轴线条数。
  splitLine:{
    show: true,                      //是否显示
    lineStyle:{                     //线条样式  
      color: ['#333333'],          
       width: 1,
       opacity: 0.1,
       type: 'solid'
    }
    }
  },

3、填入数据

xAxis: {
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
series: [
  {
    type: 'bar',
    barWidth: 22,
    itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#4AC0FF' },
      { offset: 0.5, color: 'blue' },
      { offset: 1, color: 'red' }
    ]),
    borderRadius:[12,12,0,0]
  },
    data: [666, 520, 777, 1000,857,606,500,398,1000,752,286,1000]    //数据与X轴参数对应
  }
]

4、调整网格位置

grid:{
  top:"10%",
  left:"5%",
  right:"5%",
  bottom:"10%",
  contentLabel:true
},

效果图

效果图