まずは比較グラフを見てみましょう. 次の図は、データを処理せずに echarts 統計グラフに入力した結果です (青の列を見てください). ヒストグラムは、y=0 に関係なく基づいていることがわかりますデータが正か負かを判断します。これはグラフの開始点です。
次の図は、達成したい効果であり、Y 軸の最小値を開始点として列をレンダリングするのと同じです。
解決策
1: echarts のバージョンが 4.0.0 未満の場合 (間違っている場合は記録されません)、実装は非常に簡単です
。を使用している場合は、console.log(echarts.version); を出力してバージョンを確認できますが、4.0 より高いバージョンには到達できない可能性が非常に高いです。この効果を得るには、xAxis に属性 axisLine.onZero = false を追加するだけです
。 、コードは次のとおりです。
xAxis: {
data: ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],
axisLine: {
onZero: false, //轴线是否在0刻度轴上
},
},
axisLine.onZero = false を使用しても効果が得られない場合は、以下のバージョンを直接参照して効果が得られるか確認してください。効果が得られる場合は、echarts のバージョンに問題がある可能性が高いです。
<script crossorigin="anonymous" integrity="sha384-mYHbpb8SNpRR9uL7PfZoWk1rI3/VXsAkIC5Sy7+Aa7a79JKqZ19qg4OcgvgsCx36"
src="https://lib.baomitu.com/echarts/4.0.0/echarts.min.js"></script>
(追記: 以前、echarts GitHub で問題の記録を読みました。バージョン 5.5.0 以降では、barSeries.startValue を使用して開始値を設定できますが、このバージョンはまだリリースされていないようです。具体的な質問については、を参照してください。 : https://github.com/apache/echarts/pull/17078)
解決策 2: 積み上げヒストグラムを使用して
アイデアを実現します。
コードは次のとおりです。
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:500px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let xData = ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
let data1 = [20, 8, -18, -26, -37] //bar1数据
let data2 = [] //bar2数据
// 计算y轴最小值（根据自己实际情况而定）-------------------------
let yMin = Math.ceil(Math.min(...data1))
if (yMin < 0) {
let numConvert = yMin;
numConvert = yMin * -1
let str = numConvert.toString().length;
let arr = [1, 10, 100, 1000, 10000]
let digit; //位数
let num = 1
if (str === 1) {
// 个位
digit = parseInt(yMin % 10);
if (digit < 0) {
num = -1
}
yMin = num * 10
} else {
digit = parseInt((yMin % arr[str]) / arr[str - 1]);
if (digit < 0) {
num = -1
}
yMin = (digit + num) * arr[str - 1]
}
//--------------------------------------------------
//bar2值设置
data1.forEach(item => {
if (item > 0) {
data2.push(yMin)
} else {
data2.push(item + yMin)
}
})
} else {
data2 = [0, 0, 0, 0, 0] //我这是柱状图固定只显示5个柱子，实际情况自行改逻辑
}
var option = {
tooltip: {
show: true,
trigger: 'axis',
formatter: function (par) {
return `<div>${
par[0].name}</div><div>光功率：${
par[0].value}</div>`
}
},
xAxis: {
data: xData,
axisLabel: {
// 文字省略
formatter: function (value) {
// console.log('999--', value);
if (value.length > 3) {
return `${
value.slice(0, 3)}...`
}
return value
}
},
axisLine: {
onZero: false, //轴线是否在0刻度轴上
},
},
yAxis: {
splitLine: {
show: false },
min: yMin < 0 ? yMin : 0, //y最小值
},
series: [
{
name: '销量',
type: 'bar',
stack: 'one', //设置堆叠图
data: data1.map(item => {
return {
value: item,
label: {
formatter: '{c}' + 'db',
show: item > 0 ? true : false, //bar1数据大于0顶部显示提示文字
position: 'top',
textStyle: {
color: 'blue'
},
},
itemStyle: {
// 边框
borderColor: item > 0 ?"blue":"rgba(240, 240, 240,0)",
}
}
}),
barWidth: '50px', // 柱子宽度
itemStyle: {
normal: {
//bar1颜色控制，小于0，颜色与背景色相同，否则为蓝色
color: function (param) {
let color = "blue"
if (param.value < 0) {
color = "rgba(240, 240, 240,0)"
}
return color
},
}
},
//设置柱状图背景
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
},
{
name: 'bar2',
type: 'bar',
stack: 'one',
itemStyle: {
normal: {
color: "blue",
borderColor: "blue", //边框
}
},
barWidth: '50px', // 柱子宽度
data: data2.map((item, index) => {
return {
value: item,
label: {
formatter: data1[index] + 'db',
//bar1当前数据小于0，bar2顶部显示提示文字，否则不显示
show: data1[index] < 0 ? true : false,
position: 'top',
textStyle: {
color: 'blue'
},
},
}
}),
},
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
以上～～～（この方法は必ずしも良いものではありません、参考程度に）