ECharts how to set different symbol for different marklines in one chart

Question

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.

When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.

markLine: {
    symbol:"none",
    data:[]
}

function format(data)
{
    data = parseFloat(data);
    return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}

var columns_basic_element = document.getElementById("columns_basic");
// Basic columns chart
if (columns_basic_element) {

    // Initialize chart
    var columns_basic = echarts.init(columns_basic_element);
    
    var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53];
    
    var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22];


    //
    // Chart config
    //

    // Options
    columns_basic.setOption({

        // Define colors
        color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'],

        // Global text styles
        textStyle: {
            fontFamily: 'Roboto, Arial, Verdana, sans-serif',
            fontSize: 13
        },

        // Chart animation duration
        animationDuration: 750,

        // Setup grid
        grid: {
            left: 0,
            right: 90,
            top: 35,
            bottom: 0,
            containLabel: true
        },

        // Add legend
        legend: {
            data: ['Parts', 'Labor'],
            itemHeight: 8,
            itemGap: 20,
            textStyle: {
                padding: [0, 5]
            }
        },

        // Add tooltip
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.75)',
            padding: [10, 15],
            textStyle: {
                fontSize: 13,
                fontFamily: 'Roboto, sans-serif'
            }
        },

        // Horizontal axis
        xAxis: [{
            type: 'category',
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            }
        }],

        // Vertical axis
        yAxis: [{
            type: 'value',
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            },
            ticks: {
                beginAtZero: true,
                callback: function(value, index, values) {
                    return '$' + Intl.NumberFormat().format((value/1000));
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
                }
            }
        }],

        // Add series
        series: [
           
            {
                name: 'Labor',
                type: 'bar',
                data: data_labor,
                label: {
                    normal: {
                        formatter: function (params) {
                            var val = format(params.value);
                            return val;
                        },
                        show: true,
                        //position: 'inside'
                    },
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontWeight: 500
                            }
                        }
                    }
                },
                markLine: {
                    symbol:"none",
                    data: [
                    { 
                        // I want to set symbol:none for this line only
                        name: 'test',
                        yAxis:120000 , 
                        label: {
                            position: 'insideEndTop',
                            normal: {
                                formatter: '{b}:{c}',
                                show: true
                            },
                        }
                       },
                      { 
                        //keep its original style
                        type: 'average',
                        name: 'Average',
                        label: {
                            position: 'insideEndTop',
                            normal: {
                                formatter: '{b}:{c}',
                                show: true
                            },
                        }
                    }]
                    
                }
            }
        ]
    });
}

.chart-container {
  position:relative;
  width:100%;
}

.chart {
  position:relative;
  display:block;
  width:100%;
}

.has-fixed-height {
  height:400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

<div class="chart-container">
  <div class="chart has-fixed-height" id="columns_basic"></div>
</div>

Answer 1

I got this to work based from the bottom comment on this github issue Github Issue. Set symbol to an array the default is shown when you getoptions on a current graph let currentOptions = graph.getoption(); then currentOptions.markLine is an object that shows the defaults so to override the defaults use this option on a series.

    let setPointSeriesObject = {
      name: "Setpoints",
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      markLine: {
        symbol:["none","none"],
        data: setPointLines,
        emphasis:{
          label: {
            show:false
          },
          lineStyle:{
            width:1
          }
        },
        tooltip:{
          trigger:"none"
        }
      }
    };
    options.series.push(setPointSeriesObject);

For completeness, my code has an array of setpoints usually min and max tolerances. Here is the code to create setPointLines

let graphSetPointLinesFixed = [10,-10] //max and min tolerances line
let setPointLines = [];
for (const setPoint of graphSetPointLinesFixed) {
  setPointLines.push({
    name:parseFloat(setPoint),
    yAxis:parseFloat(setPoint)
  });
}

Overall this code creates set points that can be turned on and off as shown in the picture. I do not know when this became the way to set markLines but it works with 5.3 and 5.4.

Answer 2

I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:

• Base Concepts
• MarkerModel.js
• MarkLineView.js

var myChart = echarts.init(document.getElementById('main'));

  var option = {
    xAxis: [{
      data: ["1", "2", "3", "4", "5", "6"]
    },{
      data: ["1", "2", "3", "4", "5", "6"],
      show: false,
    }],
    yAxis: {},
    series: [
    {
      name: 'Series1',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      markLine: {
        data: [{
          symbol: 'none',
          name: 'max line',
          type: 'max',
          lineStyle: {
            normal: {
              type:'solid',
              color: 'blue',
            }
          },
        }],
      }
    },{
      name: 'Series2',
      type: 'bar',
      data: [0,0],
      xAxisIndex: 1,
      label: { show: false },
      markLine: {
        symbol: 'none',
        data: [{
          yAxis: 24,
          label: {
            normal: {
             show: false, 
            }
          },
          lineStyle: {
            normal: {
              type:'dashed',
              color: 'green',
            }
          },
        }],
      }
    }]
  }

  myChart.setOption(option);

<div id="main" style="width: 600px;height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

Answer 3

You have mistake with incorrect symbol declaration, do like this:

markLine: {
  symbol: 'icon' // <---- it's wrong
  data: [{
    symbol: 'diamond',   // <---- it's right
    symbolSize: 30,
    name: 'average line',
    type: 'average'
  },{
    symbol: 'circle',
    symbolSize: 30,
    name: 'max line',
    type: 'max'
  }]
}

  var myChart = echarts.init(document.getElementById('main'));

  // Unsert your code below
  var option = {
    xAxis: {
      data: ["1", "2", "3", "4", "5", "6"]
    },
    yAxis: {},
    series: [{
      name: 'Series1',
      stack: '1',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      markLine: {
        data: [{
            symbol: 'diamond',
          symbolSize: 30,
          name: 'average line',
          type: 'average'
        },{
            symbol: 'circle',
          symbolSize: 30,
          name: 'max line',
          type: 'max'
        }]
      }
    }]
  }

  myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>