visualMap issues - Githubissues

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 / ngx-echarts

visualMap issues #394