y轴标签与柱状图样色统一 echarts
option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], position: 'top', axisLine: { show: true, }, axisTick:{ show: true }, splitLine: { show: false } }, yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], inverse: true, axisLine: { show: false, }, axisTick:{ show: false }, axisLabel:{ show: true, // align: 'center', // backgroundColor: '#3B98FE', formatter: function (value,index) { if(index == 0){ return '{style' + index + '| ' + value + '}'; } return '{style| ' + value + '}'; }, rich:{ style0: { backgroundColor: 'red', padding:[5,12], // height:36 }, style: { backgroundColor: '#3B98FE', padding: [5, 12] } }, // padding: [5, 12], color: "#fff", borderRadius: [3, 0, 0, 3] } }, series: [ { name: '2011', type: 'bar', barWidth: 36, label: { offset:[20,0], }, data: [18203, 23489, 29034, 104970, 131744, 630230].reverse(), itemStyle:{ borderRadius: [0, 18, 18, 0], normal: { color: function(params) { // 给出颜色组 var colorList = ['#FF6977', '#FFA448', '#00C891', '#3B98FE']; //循环调用 if(params.dataIndex<4){ return colorList[params.dataIndex] }else{ return colorList[3] } }, borderRadius: [0, 18, 18, 0], } } } ] };
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通