clg333zzz opened a new issue #16240: URL: https://github.com/apache/echarts/issues/16240
### Version 5.2.2 ### Link to Minimal Reproduction https://jsfiddle.net/clg333zzz/84nuka9L/1/ ### Steps to Reproduce ``` function numberFilter(val) { if (val === "" || (!val && typeof val !== 'number')) { return "" } let valRes = val || 0 let numArr = valRes.toString().split('.') numArr[0] = numArr[0].replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") return numArr.join('.') } var myChart = echarts.init(document.getElementById('main')); var categoryData = ["2021-12-17 09:45:00", "2021-12-17 10:00:00", "2021-12-17 10:15:00", "2021-12-17 10:30:00", "2021-12-17 10:45:00", "2021-12-17 11:00:00", "2021-12-17 11:15:00", "2021-12-17 11:30:00", "2021-12-17 11:45:00", "2021-12-17 12:00:00", "2021-12-17 12:15:00", "2021-12-17 12:30:00", "2021-12-17 12:45:00", "2021-12-17 13:00:00", "2021-12-17 13:15:00", "2021-12-17 13:30:00", "2021-12-17 13:45:00", "2021-12-17 14:00:00", "2021-12-17 14:15:00", "2021-12-17 14:30:00", "2021-12-17 14:45:00", "2021-12-17 15:00:00", "2021-12-17 15:15:00", "2021-12-17 15:30:00"] var values = [["41.16000000", "41.16000000", "41.16000000", "41.16000000", "0.00000000"], ["41.25000000", "40.99000000", "40.99000000", "41.25000000", "34.93250000"], ["40.99000000", "40.99000000", "40.99000000", "40.99000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "13.12320000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["40.97000000", "41.04000000", "40.97000000", "41.04000000", "110.68160000"], ["41.16000000", "41.36000000", "41.16000000", "42.15000000", "9934.33540000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "151.88040000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "0.00000000"], ["41.21000000", "41.21000000", "41.21000000", "41.21000000", "88.18940000"], ["41.23000000", "41.23000000", "41.23000000", "41.23000000", "149.66490000"], ["41.14000000", "41.08000000", "41.08000000", "41.14000000", "25.07380000"], ["41.08000000", "41.08000000", "41.08000000", "41.08000000", "0.00000000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "14.81760000"], ["41.16000000", "41.08000000", "41.08000000", "41.16000000", "404.53080000"], ["41.08000000", "41.08000000", "41.08000000", "41.08000000", "0.00000000"], ["40.97000000", "40.97000000", "40.97000000", "40.97000000", "43.01850000"], ["40.90000000", "40.90000000", "40.90000000", "40.90000000", "15.13300000"], ["40.73000000", "40.68000000", "40.68000000", "40.73000000", "763.98890000"], ["40.60000000", "40.44000000", "40.44000000", "40.60000000", "140.30560000"], ["40.44000000", "40.44000000", "40.44000000", "40.44000000", "0.00000000"]] var volumes = [[0, "0.00000000", -1], [1, "34.93250000", 1], [2, "0.00000000", -1], [3, "13.12320000", -1], [4, "0.00000000", -1], [5, "0.00000000", -1], [6, "0.00000000", -1], [7, "0.00000000", -1], [8, "110.68160000", -1], [9, "9934.33540000", -1], [10, "151.88040000", -1], [11, "0.00000000", -1], [12, "88.18940000", -1], [13, "149.66490000", -1], [14, "25.07380000", 1], [15, "0.00000000", -1], [16, "14.81760000", -1], [17, "404.53080000", 1], [18, "0.00000000", -1], [19, "43.01850000", -1], [20, "15.13300000", -1], [21, "763.98890000", 1], [22, "140.30560000", 1], [23, "0.00000000", -1]] var upColor = '#00da3c'; var downColor = '#ec0000'; var chartOption = { animation: false, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, borderWidth: 1, borderColor: '#ccc', padding: 3, textStyle: { fontSize: '10', color: '#000' }, formatter: function (params) { let t = '', f = 1 let d = {} let tipStr = '' params.forEach(item => { if (item.seriesName === 'Volume') { d.volume = numberFilter(Number(item.data[1])) t = item.axisValue } if (item.seriesName === 'MyChart') { d.open = numberFilter(Number(item.data[1])) d.high = numberFilter(Number(item.data[4])) d.low = numberFilter(Number(item.data[3])) d.close = numberFilter(Number(item.data[2])) let amp = (Number(item.data[4]) - Number(item.data[3])) / Number(item.data[3]) amp = (amp * 100).toFixed(2) if (Number(amp) === 0) amp = '0.00' d.amp = amp let chg = (Number(item.data[2]) - Number(item.data[1])) / Number(item.data[1]) chg = (chg * 100).toFixed(2) if (Number(chg) === 0) chg = '0.00' d.chg = chg f = item.color === '#ec0000' ? 1 : -1 } }) tipStr = `<div class="c-tip ${f === -1 ? 'c-tip--up' : 'c-tip--down'}"> <div class="c-tip__t">${t}</div> <div class="c-tip__desc"> <div class="c-tip__item"><span class="c-tip__a">Volume</span><span class="c-tip__b">${d.volume}</span></div> <div class="c-tip__item"><span class="c-tip__a">Open</span><span class="c-tip__b">${d.open}</span></div> <div class="c-tip__item"><span class="c-tip__a">High</span><span class="c-tip__b">${d.high}</span></div> <div class="c-tip__item"><span class="c-tip__a">Low</span><span class="c-tip__b">${d.low}</span></div> <div class="c-tip__item"><span class="c-tip__a">Close</span><span class="c-tip__b">${d.close}</span></div> <div class="c-tip__item"><span class="c-tip__a">CHG</span><span class="c-tip__b">${d.chg}%</span></div> <div class="c-tip__item"><span class="c-tip__a">AMP</span><span class="c-tip__b">${d.amp}%</span></div> </div> </div>` return tipStr }, position: function (pos, params, el, elRect, size) { const obj = { top: 10 }; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; } }, axisPointer: { link: [ { xAxisIndex: 'all' } ], label: { show: false } }, visualMap: { show: false, seriesIndex: 1, dimension: 2, pieces: [ { value: 1, color: downColor }, { value: -1, color: upColor } ] }, grid: [ { left: '3%', right: '90', height: '57%', top: '5%' }, { left: '3%', right: '90', top: '69%', height: '24%' } ], xAxis: [ { type: 'category', data: categoryData, scale: true, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, axisLabel: { formatter: function (value, index) { const val = value.replace(/[-\/\:]/g, ' ').split(' ') if (Number(val[3]) === 0 && Number(val[4]) === 0) { return `${val[1]}/${val[2]}` } else { return `${val[3]}:${val[4]}` } } }, min: 'dataMin', max: 'dataMax', axisPointer: { z: 100 } }, { type: 'category', gridIndex: 1, data: categoryData, scale: true, boundaryGap: false, axisLabel: { formatter: function (value, index) { const val = value.replace(/[-\/\:]/g, ' ').split(' ') if (Number(val[3]) === 0 && Number(val[4]) === 0) { return `${val[1]}/${val[2]}` } else { return `${val[3]}:${val[4]}` } } }, min: 'dataMin', max: 'dataMax' } ], yAxis: [ { scale: true, splitLine: { show: false }, splitArea: { show: true }, splitNumber: 8, position: 'right', offset: 10, }, { scale: true, gridIndex: 1, splitNumber: 2, position: 'right', offset: 10, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, splitArea: { show: true }, } ], dataZoom: [ { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100, minValueSpan: 12 }, ], series: [ { name: 'MyChart', type: 'candlestick', data: values, barWidth: '70%', itemStyle: { color: upColor, color0: downColor, borderColor: undefined, borderColor0: undefined } }, { name: 'Volume', type: 'bar', barWidth: '70%', xAxisIndex: 1, yAxisIndex: 1, data: volumes } ] } myChart.setOption(chartOption); ``` ### Current Behavior 当`[open, close, lowest, highest]`4个值均为0时，缩放KLine时，颜色会变化，但是下面的`visualMap`并不会同步变化，因为`visualMap`中的颜色是固定的。 **before**  **after**  ### Expected Behavior 是否有一种方案可以固定KLine中的颜色，不会因为缩放导致颜色变化。 ### Environment _No response_ ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
