Echarts正负条形图将x轴都设置成正数

最近在做项目的时候需要用到 Echarts 的正负条形图，但是条形图的左半部分的数值是负数的，但是我们需要他也是正数的，话不多说，先上效果图：

所以需要做如下几步修改：

首先需要修改x轴上面显示为负数的刻度标签，找到xAxis[i].axisLabel，重写他的formatter，代码如下所示：

xAxis: [{type: 'value',axisLabel: {formatter: (value) => {// 负数取反 显示的就是正数了if (value < 0) return -valueelse return value}}}
]

其次修改柱状图上面显示为负数的文本标签，找到series[i].label，重写他的formatter，代码如下所示：

series: [{name: '流入',type: 'bar',stack: '总量',label: {show: true,// formatter 的另一种简便写法formatter: '{c} MB/S'},itemStyle: {color: '#47a1ff'},data: [388.28, 333.69, 408.56, 391.61, 480.39]},{name: '流出',type: 'bar',stack: '总量',label: {show: true,formatter: (value) => {// 值都是负数的 所以需要取反一下return -value.data + 'MB/S'}},itemStyle: {color: '#fbd54c'},data: [-409.17, -473.6, -462.96, -501.67, -452.13]}
]

如果有提示框的话，提示框中为负数的数据也要坐相应的修改，代码如下所示：

tooltip: {trigger: 'axis',axisPointer: {type: 'shadow' // 坐标指示器类型},formatter: (params) => {if (!params.length) return ''let s = params[0].axisValueLabel + '<br/>'for (const iterator of params) {// 如果是负数则反转let d = iterator.data < 0 ? -iterator.data : iterator.datas += iterator.marker + iterator.seriesName + '：' + d + ' MB/S' + '<br/>'}return s}
}

最后附上option全部代码：

let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: (params) => {if (!params.length) return ''let s = params[0].axisValueLabel + '<br/>'for (const iterator of params) {let d = iterator.data < 0 ? -iterator.data : iterator.datas += iterator.marker + iterator.seriesName + '：' + d + ' MB/S' + '<br/>'}return s}},legend: {data: ['流出', '流入']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'value',axisLabel: {formatter: (value) => {if (value < 0) return -valueelse return value}}}],yAxis: [{type: 'category',axisTick: { show: false },data: ['GigabitEthernet1/0/47', 'GigabitEthernet2/0/24', 'GigabitEthernet2/0/23', 'GigabitEthernet1/0/18', 'GigabitEthernet1/0/8']}],series: [{name: '流入',type: 'bar',stack: '总量',label: {show: true,formatter: '{c} MB/S'},itemStyle: {color: '#47a1ff'},data: [388.28, 333.69, 408.56, 391.61, 480.39]},{name: '流出',type: 'bar',stack: '总量',label: {show: true,formatter: (value) => {// 值都是负数的 所以需要取反一下return -value.data + 'MB/S'}},itemStyle: {color: '#fbd54c'},data: [-409.17, -473.6, -462.96, -501.67, -452.13]}]
}

Echarts正负条形图将x轴都设置成正数相关推荐

Python中matplotlib默认绘制的条形图比较胖？如何设置成体型匀称的条形图，达到最佳的可视化效果。
Python中matplotlib默认绘制的条形图比较胖?如何设置成体型匀称的条形图,达到最佳的可视化效果. #默认情形下的条形图 n_bars = len(x_labels)xval = np.ar ...
echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
php正负数都转成正数,PHP将数组中负数全部变为正数的方法
PHP将数组中负数全部变为正数的方法发布时间:2020-08-21 10:40:56 来源:亿速云阅读:66 作者:小新这篇文章主要介绍PHP将数组中负数全部变为正数的方法,文中介绍的非常详细, ...
echarts或vcharts的X轴设置
vcharts vcharts就是基于vue对echarts进行封装后的图表组件,其配置有两个参数settting和extend,settings的参数格式参照vcharts的官方文档(https:/ ...
echart 设置y轴间隔_分割ECharts的y轴并设置坐标轴间隔
在 ECharts 图表中的 y 轴的分割段数默认为5,这是由于 yAxis 中的 splitNumber 的决定的.那么我们如果想要在 y 坐标轴上进行更多的分段呢?如何让其刻度间隔变得更加的细致呢 ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图效果图如下: 1.1 配置option对象 option:{// 设置 x 轴的样式xAxis:{},// 设置 y 轴的样式yAxis:[],// 设置每条曲 ...
Echarts绘制不均匀数据轴（y）
应用场景(以Echarts柱状图为例): 现有一组数据:最小的数是 50000(5万) ,最大的数是 3000000000(30亿). 如果按照Echarts正常的画法,我们只需提取出来这些数据然后交 ...
柱状图怎么设置xy轴_echarts图表x，y轴的设置
每到用echarts这门技术去画图的时候,我们大多人都是直接从echarts的官网的案例找相应的案例直接把代码复制到开发软件上基本随便一改就能使用,但是这种情况基本都是在练习的时候和项目开发没有必须要 ...

Echarts正负条形图将x轴都设置成正数

Echarts正负条形图将x轴都设置成正数相关推荐

最新文章

热门文章