[GitHub] [echarts] naanna opened a new issue #16613: [Bug] 热力图模式下必须配置visualMap

[GitBox]

naanna opened a new issue #16613:
URL: https://github.com/apache/echarts/issues/16613


   ### Version
   
   5.3.0
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   图表配置如下
   `const hours = [];
   const days = [‘1’, ‘2’, '3'];
   const testData = [
     {
       X: 0,
       Y: 0,
       value: 50
     },
     {
       X: 0,
       Y: 1,
       value: 0
     },
     {
       X: 1,
       Y: 0,
       value: 100
     },
     {
       X: 1,
       Y: 1
       // value: -1
     },
     {
       X: 2,
       Y: 0,
       value: -1
     }
   ];
   
   option = {
     // visualMap: {
     //   type: 'piecewise',
     //   // show: false,
     //   // min: 0,
     //   // max: 100,
     //   // // pieces: [{ is_exceptional: true, color: 'red' }]
     //   // categories: [
     //   //     'is_exceptional', 'Blademaster', 'Death Knight', 'Warden', 
'Paladin'
     //   // ],
     //   inRange: {
     //     // color: () => 'red'
     //       color: ['red', 'green', 'blue']
     //   }
     // },
     tooltip: {
       position: 'top'
     },
     grid: {
       height: '50%',
       top: '10%'
     },
     xAxis: {
       type: 'category',
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
         formatter: (val) => Number(val) + 1
       }
     },
     yAxis: {
       type: 'category',
       data: days,
       axisLine: { show: false },
       axisTick: { show: false }
     },
     dataset: {
       source: testData,
       dimensions: ['X', 'Y', 'value']
     },
     series: [
       {
         name: 'Punch Card',
         type: 'heatmap',
         label: {
           show: true,
           color: '#fff',
           formatter: (params) => {
             return params.value.value;
           }
         },
         itemStyle: {
           borderColor: '#fff',
           borderWidth: 2,
           color: (params) => {
                  return 'red';
           }
         }
       }
     ]
   };`
   
   ### Current Behavior
   
   绘制热力图，希望能够根据传入的数据自定义颜色，于是选择使用series.itemStyle.color，根据传入数据渲染热力图单个色块颜色。 
   
在热力图的例子（https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian）下运行正常，但运用到实际项目里时报错：Heatmap
 must use with visualMap；
   看了下是源码加了段判断导致
   
![image](https://user-images.githubusercontent.com/23169712/156356402-ca12a74d-c3a2-4831-9aa7-765419ba4461.png)
   `  
   if (__DEV__) {
               if (!visualMapOfThisSeries) {
                   throw new Error('Heatmap must use with visualMap');
               }
           }
   `
   
由于需求要求不仅要色块的颜色能够分段展示，还需要根据特定的参数展示特定的颜色。由于配置visualMap优先级高于itemStyle，无法做到特定颜色的展示
   
   
   ### Expected Behavior
   
   在热力图模式下，可以使用series.itemStyle.color定义色块颜色。或visualMap可以支持自定义色块。 
当前visualMap并不满足需求使用
   
   ### Environment
   
   ```markdown
   - OS: macOS
   - Browser:Chrome 96.0.4664.55
   - Framework: react
   ```
   
   
   ### 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: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org