How to use echarts visualMap to color Line depending on X-Axis Value?

Question

Expected:

I want to divide single line into 2 parts based on x axis value.

Example, when x-value is greater than "2016-8" show dashed line as following

Tried with ECharts visualMap, but it only works depending on y-axis value https://echarts.apache.org/examples/en/editor.html?c=line-aqi

Answer 1

It seems VisualMap can only be used to change the color and/or symbol of the line.

Different colors on the same line using VisualMap on xAxis

If you don't specifically need to get a dashed line and you just want to use VisualMap on xAxis, you should set visualMap-piecewise.dimension to 0 (0 being x and 1 being y in simple [x,y] series).

visualMap: {
  dimension: 0,
},

Then you'll need to set your list of pieces depending on the type of xAxis ('time' or 'category'):

• 'time' : full example
• 'category' : full example

Dashed line on half the series

If you specifically need to get this :

when x-value is greater than "2016-8" show dashed line as following

You can split your series in 2 different series and affect a different line style to each of them:

1. Series 1: date <= "2016-8" (solid line)
2. Series 2: date >= "2016-8" (dashed line)

Here is a working example.