irpas技术客

解决Echarts柱形图正负数在同一侧,并设置正负值不同颜色_snowman**_echarts柱状图正负

irpas 4244

let data = [100,20,-40,50,-10] //真实数值 let data1 = [] data.map(item=>{ //把负值都变成整数,放在新的数组里,用来展示柱形高度 let newdata=0 if(item < 0){ newdata = -item }else{ newdata = item } data1.push(newdata) }) // 基于准备好的dom,初始化echarts实例 if(document.getElementById('balance')){ let myChart = echarts.init(document.getElementById('balance')); // 绘制图表 let option = { color: ["#E47373"], tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, backgroundColor: 'rgba(51, 51, 51, 0.8)', borderWidth: 0, textStyle: { color: '#FFFFFF', fontSize: 12, }, formatter: function(params){ let res; res = '<div>' + '<div class="echarts-bar-tooltip" style="text-align: center">' + '<span style="width: 6px;height: 6px;border-radius: 50%;display:block;float:left;margin: 6px 4px 0 0;background: #E47373"></span>' + params[0].axisValue + '</div>' + '<div style="text-align: center">¥' + data[params[0].dataIndex] + '元</div>' + '</div>' return res //鼠标划过展示真实数值 } }, grid: { left: "0", top: '0', bottom: '0' }, xAxis: { type: 'category', data:["资金1", "资金2", "资金3", "资金4", "资金5"], show: false, position: 'bottom', offset: 0 }, yAxis: { type: 'value', show: false }, series: [{ data: data1, type: 'bar', itemStyle: { normal: { color: function (farams){ if(data[farams.dataIndex] > 0){ //根据真实数值正负显示不同柱形颜色 return '#E47373' }else{ return '#27CDA2' } } } } }] }; myChart.setOption(option) window.addEventListener("resize", function () { myChart.resize(); })

?

这是我第一次写,感谢小王同志的支持。


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #echarts柱状图正负 #let #data #100 #20 #40 #50