最近在做一个项目需要用到echarts,所以一边学习ECharts官网上的中文API(http://echarts.baidu.com/examples.html),然后一些细节部分如果没有我就再搜各位前辈写的代码,总算将功能实现出来了,下面就是我的代码以及最终效果图。
先看效果图:
有时候我们需要用到堆叠柱状图的效果,所以看代码、如下:
series: [
{
name:"用户数",
type:'bar',
stack:'123',
//颜色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#71E2E5'
}, {
offset: 1,
color: '#C3F3F4'
}]),
data:[700, 409, 700, 232, 256, 767, 135.6, 162.2],
barWidth : 10,
itemStyle: {
emphasis: {
barBorderRadius:[10, 10, 10, 10]
},
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[10, 10, 10, 10],
}
},
},
{
name:"用户数",
type:'bar',
stack:'123',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#EFC1B7'
}, {
offset: 1,
color: '#FBEBE7'
}]),
data:[700, 129, 70, 32, 56, 67, 35.6, 163.2],
barWidth : 10,
itemStyle: {
emphasis: {
barBorderRadius:[10, 10, 10, 10]
},
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[10, 10, 10, 10],
}
},
},
``
这里只需要在每一个里面添加一个stack属性即可,希望能够帮助到你们。