0

I am using Echarts, and I want to color my series (the trends, not the background) with different ranges. The following example is almost what I need:

enter image description here

But with two modifications:

  • I have a "time" axis instead of a "category" axis.
  • For the ranges of the series that are not specified in the visualMap, I want them to keep their original, random-generated color.

I just modified the code in the previous example to try to do it, with no luck:

var values = [];

for(var i = 0; i < 15; i++) {
    var date = new Date();
    date.setDate(date.getDate() + i);
    values.push([date, i])
}

const firstDate = values[1][0];
const lastDate = values[5][0];

option = {
    xAxis: {
        type: 'time',
        boundaryGap: false,
    },
    yAxis: {
        type: 'value',
    },
    visualMap: {
        pieces: [{
            gt: firstDate,
            lte: lastDate,
            color: 'green'
        }]
    },

    series: [
        {
            type: 'line',
            data: values, 
        }
    ]
};

I just get errors like:

  • Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('undefined') could not be parsed as a color.
  • t.indexOf is not a function at py (echarts.min.js:formatted:15975)

I do not see any information related with time axes in the visualMap documentation.... any ideas?

Carlos Isidoro López
  • 383
  • 1
  • 2
  • 17
  • Provide dummy data for work with. See [mcve]. – Marco Aurelio Fernandez Reyes May 07 '21 at 21:49
  • @MarcoAurelioFernandezReyes I believe the code I added is a minimal example, as it generates an array of dates as dummy data, and it is simple enough. To run it, just go to the [Echarts playground](https://echarts.apache.org/examples/en/editor.html?c=line-sections) and paste it. – Carlos Isidoro López May 10 '21 at 13:51
  • Use jsfiddle instead or the code snippet available in Stack Overflow for create a [mvce] - pasting your code in that page shows the errors you mention. It might be something else is needed for configure the chart using that API. I wonder why in their [documentation](https://echarts.apache.org/v4/en/option.html#visualMap) doesn't have a sample...Seems echarts are needs more settings (*and those settings must be in certain orden*) for work without errors. See this [answer](https://stackoverflow.com/a/26108362/12511801) about one of the errors I had when using echarts in jsfiddle. – Marco Aurelio Fernandez Reyes May 10 '21 at 14:41
  • I share with you this [jsfiddle](http://jsfiddle.net/MauricioSO2021/e801x5jd/) I made with your code and after trying for a while, you have to check the documentation, search working examples on Google and try. This API chart needs more settings, but, the error details aren't very clear to me for continue. I hope this sample gives you something to work with. Good luck. – Marco Aurelio Fernandez Reyes May 10 '21 at 14:44

0 Answers0