讲了两篇废话终于来到正文了=。=
先来说说我第一次引入的柱状图——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
},
效果图
效果图
