visualMap issues

[cscrum]

I'm currently using ngx-echarts to create line graphs with 5 series, 2 of which have "areas" under them. I'm trying to create a visualMap on one of the series with the area and shade the area based on a third value (not x,y). If I remove the areaStyle, lineStyle, and itemStyles, I just get a red line for the series, but the tooltip shows a point with the visualMap applied. Code and sample images below.

`//profarray is an array of multiple sets of data to create several charts

let pcnt = 0;
let xVals = [];
profarray.forEach(function(profpt){
xVals.push(profpt.distance);
terArr.push([profpt.distance,profpt.terrain,0]);

cltArr.push([profpt.distance,profpt.clutter,profpt.category]);
fresArr.push([profpt.distance,profpt.freznel,0]);
f60Arr.push([profpt.distance,profpt.freznel_60,0]);
losArr.push([profpt.distance,profpt.los,0]);
pcnt++;
})

let echtopts: EChartsOption = {
title: {
show: true,
text: ap.title,
textStyle: {fontSize: 12}
},
colors: ['#8B4513','#00ff00', '#0000ff', '#ff00ff', ap.color],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
}
},
textStyle:{fontSize: 9}
},
legend: {
data: ['Terrain','Clutter', 'Fresnel', 'Fresnel60', 'LOS'],
bottom: '3',
testStyle: {fontSize: 9}
},
grid: {
left: 60,
top: 20,
right: 2,
bottom: 90,
containLabel: false
},
xAxis: [
{
type: 'category',
name: 'Distance (km)',
nameLocation: 'middle',
nameGap: 25,
//boundaryGap: false,
//data: xVals
}
],
yAxis: [
{
type: 'value',
name: 'Elevation (ft)',
nameLocation: 'middle',
nameGap: 35,
min: function(){
if (Math.min(...terArr) == 0){
return 0;
}else{
return (Math.min(...terArr) - 10).toFixed(2);
}
}
}
],
visualMap: {
type: 'piecewise',
show: false,
dimension: 2,
seriesIndex: 0,
pieces: [{
//trees
gt:9,
lte: 10,
color: '#76A772'
},
{
//shrub
gt:19,
lte: 20,
color: '#F6F598'
},
{
//grass
gt:29,
lte: 30,
color: '#A0C731'
},
{
//crop
gt: 39,
lte: 40,
color: '#E7F88E'
},
{
//built up
gt:49,
lte: 50,
color: '#F37572'
},
{
//bare
gt: 59,
lte: 60,
color: '#B4B4B4'
},
{
//snow
gt: 69,
lte: 70,
color: '#F0F0F0'
},
{
//water
gt: 79,
lte: 80,
color: '#0064C8'
},
{
//herbacious wet
gt: 89,
lte: 90,
color: '#0096A0'
},
{
//mangrove
gt: 94,
lte: 95,
color: '#5D9C58'
},
{
//moss
gt: 99,
lte: 100,
color: '#F6D283'
}

]

},
series: [
{
name: 'Clutter',
type: 'line',
lineStyle: {color: '#00ff00'},
areaStyle: {color:'#00ff00'},
itemStyle: {color:'#00ff00'},
showSymbol: false,
data: cltArr
},
{
name: 'Terrain',
type: 'line',
lineStyle: {color: '#8B4513'},
areaStyle: {color:'#8B4513'},
itemStyle: {color:'#8B4513'},
colorBy: 'series',
showSymbol: false,
data: terArr
},
{
name: 'Fresnel',
type: 'line',
lineStyle: {color: '#0000ff'},
itemStyle: {color:'#0000ff'},
colorBy: 'series',
showSymbol: false,
data: fresArr
},
{
name: 'Fresnel60',
type: 'line',

  lineStyle: {color: '#ff00ff'},
  itemStyle: {color:'#ff00ff'},
  colorBy: 'series',
  showSymbol: false,
  data: f60Arr
},
{
  name: 'LOS',
  type: 'line',
  lineStyle: {color: ap.color},
  itemStyle: {color: ap.color},
  colorBy: 'series',
  showSymbol: false,
  data: losArr
}

]
};

ap["echtdata"] = echtopts;

This is the chart I get when I specify the styles on the first series:

Here it is with the tooltip showing. Notice the color of the dot for the "Clutter" in the tooltip has the visualMap color in it. That is great, but I want them to show up in the area under the line as well.

If I comment all the styling from the first series (the Clutter series), this is what I get

Notice the line just goes to red, but the tooltip still shows the visualMap color. If I just add areaStyle: {} I get this:

Am I missing something that should apply the visualMap to the actual chart?

[xieziyu]

Hi @cscrum
I'm sorry I don't think it's an issue related to ngx-echarts.
You can refer to ECharts document for details about visualMap, or you can open issue at apache/echarts