Heatmap always giving 'Heatmap must use with visualMap' error even though we provided visual map.

[Manikanta-GEP]

Heatmap always giving 'Heatmap must use with visualMap' error even though we provided visual map.

import React, {useRef, useEffect} from 'react'; import {StyleSheet} from 'react-native'; import as echarts from 'echarts/core'; import as Echarts from 'echarts/charts'; import {GridComponent} from 'echarts/components'; import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts';

// LineChart, BarChart, PieChart, ScatterChart, RadarChart, MapChart, TreeChart, TreemapChart, GraphChart, GaugeChart, FunnelChart, ParallelChart, SankeyChart, BoxplotChart, CandlestickChart, EffectScatterChart, LinesChart, HeatmapChart, PictorialBarChart, ThemeRiverChart, SunburstChart, CustomChart echarts.use([SVGRenderer, Echarts.HeatmapChart, GridComponent]);

const HeatMap = props => { const {styles} = props?.data; const {height = 320, width = 320} = styles; const skiaRef = useRef(null); useEffect(() => { function getVirtualData(year) { const date = +echarts.time.parse(year + '-01-01'); const end = +echarts.time.parse(+year + 1 + '-01-01'); const dayTime = 3600 24 1000; const data = []; for (let time = date; time < end; time += dayTime) { data.push([echarts.time.format(time, '{yyyy}-{MM}-{dd}', false), Math.floor(Math.random() * 10000)]); } return data; } const option = { title: { top: 30, left: 'center', text: 'Daily Step Count', }, tooltip: {}, visualMap: { min: 0, max: 10000, type: 'piecewise', orient: 'horizontal', left: 'center', top: 65, }, calendar: { top: 120, left: 30, right: 30, cellSize: ['auto', 13], range: '2016', itemStyle: { borderWidth: 0.5, }, yearLabel: {show: false}, }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: getVirtualData('2016'), }, }; let chart; if (skiaRef.current) { chart = echarts.init(skiaRef.current, 'light', { renderer: 'svg', width: width, height: height, }); chart.setOption(option); } return () => chart?.dispose(); }, []);

return ; };

export default HeatMap;

const styles = StyleSheet.create({});

Expected behavior Need to render heat map.

Desktop (please complete the following information):

• iOS
• 16.1

Smartphone (please complete the following information):

• Device: iPhone 14 Pro
• OS:16.1
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[zhiqingchen]

import {
  VisualMapComponent,
} from 'echarts/components';

echarts.use([
  VisualMapComponent,
]);

[Manikanta-GEP]

Thanks for the response @zhiqingchen ,

import React, {useRef, useEffect} from 'react'; import {StyleSheet} from 'react-native'; import * as echarts from 'echarts/core'; import {TooltipComponent, GridComponent, VisualMapComponent} from 'echarts/components'; import {HeatmapChart} from 'echarts/charts'; import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts';

echarts.use([TooltipComponent, GridComponent, VisualMapComponent, HeatmapChart, SVGRenderer]);

Issue still there.

[Manikanta-GEP]

I am using these versions "@wuba/react-native-echarts": "1.2.2", "echarts": "5.4.3",

[Manikanta-GEP]

@zhiqingchen , Thanks for the help, By restating metro bundler, it worked.