如图所示:前端设计提供的平面,这里面有两个不常用的功能:(1)y轴刻度标签含有图片;(2)柱图线性渐变。需要对echarts的属性十分熟悉才可以实现,具体操作如下:
(1)解决方案:
yAxis属性添加:
offset:10, axisLabel:{ formatter: '{value} {a|}', rich:{ a: { backgroundColor: { image: 'images/arrow.png', }, height: 26, width:12 }, }, textStyle:{ color:'#038deb', fontWeight:'bold', fontSize:16 } },
(2)线性渐变:
series中添加:
itemStyle:{ color:{ type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#90071e' // 0% 处的颜色 }, { offset: 1, color: '#f75062' // 100% 处的颜色 }], global: false // 缺省为 false }, }
Done!