上下渐变柱状图(echarts)
更新时间: 2021-12-22 19:24:31
阅读 1889
制作上下渐变柱状图
制作上下渐变柱状图,如下:
只需要复制如下代码就可以使用:
dataSet=dataSet.map((data,i)=>dataSet.map(d=>d[i]));
vardataX=dataSet[0];
vardataY=dataSet[1];
option={
title:{
text:'上下渐变柱状图',
},
xAxis:{
data:dataX,
axisLabel:{
textStyle:{color:'#000000',}
}},
yAxis:{
axisLabel:{
textStyle:{color:'#000000',}
}},
series:[{
type:'bar',
barWidth:37,
itemStyle:{
normal:{
label:{
show:true,
position:"top",
textStyle:{color:'#000000'},},
Width:1,
barBorderRadius:15,
color:newecharts.graphic.LinearGradient(0,0,0,1.6,[
{offset:0,color:"#0c98f8",}, //上方颜色
{offset:1,color:"#ffffff"}])},}, //下方颜色
data:dataY
},{name:'a',
tooltip:{show:false},
type:'pictorialBar',
itemStyle:{
normal:{
color:"#0c98f8",
Width:0,
Color:'#18CEE2'
}
},
symbol:'circle',
symbolSize:['37','22'],
symbolPosition:'end',
data:dataY,
z:3}]
};
可根据自己的需求修改颜色
文档反馈
以上内容对您是否有帮助?