广告公司简介怎么写,网站搜索引擎优化技术,鞍山网站制作云端,免费 网站源码Echart笔记 柱状图带背景色的柱状图将X与Y轴交换制作为进度条 柱状图
带背景色的柱状图
将X与Y轴交换制作为进度条
//将X与Y轴交换制作为进度条
option { xAxis: {type: value,min:0,max:100,show:false,//隐藏x轴},yAxis: {type: category,data:[进度条],show:false,//隐… Echart笔记 柱状图带背景色的柱状图将X与Y轴交换制作为进度条 柱状图
带背景色的柱状图
将X与Y轴交换制作为进度条
//将X与Y轴交换制作为进度条
option { xAxis: {type: value,min:0,max:100,show:false,//隐藏x轴},yAxis: {type: category,data:[进度条],show:false,//隐藏y轴},label:{show:true,fontSize:20,fontFamily:Arial,color:#C7C3E3,backgroundColor: rgba(0,0,0,0.0), //标签底色borderRadius: [5,5,5,5],position: top,horizontalAlign: center,//verticalAlign: bottom,formatter: function (params) { // 通过formatter自定义标签的显示格式return params.value %; // 在这里设置标签的值例如加上单位元},},grid: {top: 20%,left: 10%,right: 10%,bottom: 20%},series: [{type: bar,data: [90.55],color:rgba(216,100,150,0.5),showBackground: true, // 是否显示柱条的背景色默认不显示backgroundStyle: {color: rgba(180, 180, 180, 0.2), // 柱条的颜色borderColor: red, // 柱条的描边颜色borderWidth: 0, // 柱条的描边宽度默认不描边borderType: dashed, // 柱条的描边类型默认值solid可取值solid, dashed, dottedborderRadius:[20,40,40,20], //背景圆角设置},itemStyle:{normal:{borderRadius:[20,40,40,20], //圆角设置color: new echarts.graphic.LinearGradient(0,0,1,1,[ //线性渐进色设置范围0到1{offset:0,color:#A07DA0},{offset:0.25,color:#AD9CC2},{offset:0.5,color:#C7C3E3},{offset:0.75,color:#E1A08B},{offset:1,color:#D8929B},])},},barMaxWidth: 100, // 设置柱状图的最大宽度以适应 y 轴标签的长度barWidth: 50, // 设置柱状图的宽度以适应 y 轴标签的长度barMinHeight: 10, // 设置柱状图的最小高度用于显示标签信息},],
};效果图
