版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
版权
Echarts专栏收录该内容
1 篇文章0 订阅
订阅专栏
官网 : https://echarts.apache.org/zh/index.html
官网模板:https://echarts.apache.org/examples/en/index.html
代码编辑页面: https://echarts.apache.org/examples/en/editor.html?c=line-simple
柱状图:
var option = { title: { text: '单位:亿元', left:'12%', top:'4%', textStyle: { color: "#ffffff", fontSize: 18, } }, backgroundColor:'#031d7c', grid:{//直角坐标系内绘图网格 show:false,//是否显示直角坐标系网格。[ default: false ] left:"10%",//grid 组件离容器左侧的距离。 right:"30px", top:'10%', borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // }, tooltip: { trigger: "axis", }, legend: { icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none itemWidth:20, itemHeight:20, data:['累计','近60天'], textStyle:{//图例文字的样式 color:'#ccc', fontSize:16 }, x:'right', //可设定图例在左、右、居中 y:'up', //可设定图例在上、下、居中 padding:[25,100,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离] }, xAxis: { data: ["应收账款保理","订单融资","应收账款信托","票据贴现","电e贷",'电e票','电e盈','投标保证保险','履约保证保险','其他'], //设置轴线的属性 axisLine:{ lineStyle:{ color:'#ffffff', width:1,//这里是为了突出显示加上的 } }, splitLine:{ show:false, },	axisTick:{ show:false, length: 0 }, axisLabel: { color: '#ffffff', // 让x轴文字方向为竖向	interval: 0, formatter: function(value) { return value.split('').join('\n') }, textStyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontSize : 23 //更改坐标轴文字大小 } } }, yAxis: { axisLine:{ show:false, lineStyle:{ color:'#ffffff', width:1,//这里是为了突出显示加上的 } }, axisTick:{ show:false, length: 0 }, splitLine:{ show:true, lineStyle:{ type:'dashed' } } }, series: [{ name: '累计', type: 'bar', stack:'使用情况', data: [68, 60, 58, 55, 52, 50,43,41,40,30], itemStyle:{ normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#1335ea'}, //柱图渐变色 {offset: 0.5, color: '#1591f2'}, //柱图渐变色 {offset: 1, color: '#1335ea'}, //柱图渐变色 ] ) }, } },{ name: '近60天', type: 'bar', stack:'使用情况', data: [5, 4, 4, 6, 6, 4,4,5,4,5], itemStyle:{ normal:{color:"#3FBB49"}, } }] };
收藏
一键三连
扫一扫,分享海报
专栏目录
echarts的柱状图立体效果解决方案echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,柱形图显示数值,以及设置隐藏一段方案(关联和不关联),鼠标移动上去显示的提示内容,动态改变数值文本,涉及点击事件,功能齐全的易于使用;