在现有的代码保持不变上,增加代码使提示框中显示的数据从负数显示成正数
html>
<html lang="zh-CN" style="width:500px;height: 100%">
<head>
<meta charset="utf-8">
<title>title>
head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%;background-color: white;">div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
<script type="text/javascript">
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, null, {
renderer: "canvas",
useDirtyRect: false
});
var option;
const labelRight = {
position: "right"
};
option = {
title: {
text: ""
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 80,
bottom: 30
},
xAxis: {
type: "value",
position: "top",
splitLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
formatter: (value) => {
// 负数取反 显示的就是正数了
if (value < 0) return -value
else return value
}
}
},
yAxis: {
type: "category",
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: [
"ten",
"nine",
"eight",
"seven",
"six",
"five",
"four",
"three",
"two",
"one"
]
},
series: [
{
name: "工时",
type: "bar",
stack: "Total",
color:"#5470C6",
label: {
show: true,
formatter: "{b}"
},
data: [30,31,,32,,33,,33]
},
{
name: "工时",
type: "bar",
stack: "Total",
color:"red",
label: {
show: true,
formatter: "{b}"
},
tooltip: {
valueFormatter: value => value * -1
},
data: [,,-31,,-33,,-35,]
//,formatter: function(params){return Math.abs(params.value)}
}
]
};
option && myChart.setOption(option);
script>
body>
html>axisLabel: {
axisLabel: {
formatter: (value) => {
// 负数取反,显示的就是正数了
if (value < 0) return -value;
else return value;
}
}
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function (value) {
let res;
res = `${value[0].seriesName}:${value[0].value?value[0].value:'-'} <br/>${value[0].seriesName}:${value[1]?.value?value[1].value*-1:'-'}`
return res
}
},