ECharts如何为一张图表中的不同标记线设置不同的符号

Question

在echarts中，我有一个条形图，我想为其添加两条markLine，但是对于“平均”线我需要箭头样式，对于“测试”线我不希望在开始和结束处有任何符号线。

当我使用下面的设置时，它将设置所有没有箭头的标记线，而我想单独控制每个标记线的样式。

markLine: {

    symbol:"none",

    data:[]

}

.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

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 2

将符号设置为数组，当您在当前图形上获取选项时显示默认值let currentOptions = graph.getoption();，然后currentOptions.markLine是显示默认值的对象，因此要覆盖默认值，请在系列上使用此选项。   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);为了完整起见，我的代码有一组设置点，通常是最小和最大公差。这是创建 setPointLines 的代码let graphSetPointLinesFixed = [10,-10] //max and min tolerances linelet setPointLines = [];for (const setPoint of graphSetPointLinesFixed) {  setPointLines.push({    name:parseFloat(setPoint),    yAxis:parseFloat(setPoint)  });}总的来说，此代码创建了可以打开和关闭的设定点，如图所示。我不知道这是什么时候成为设置 markLines 的方法，但它适用于 5.3 和 5.4。

Answer 3

您的符号声明有误，请执行以下操作：markLine: {&nbsp; symbol: 'icon' // <---- it's wrong&nbsp; data: [{&nbsp; &nbsp; symbol: 'diamond',&nbsp; &nbsp;// <---- it's right&nbsp; &nbsp; symbolSize: 30,&nbsp; &nbsp; name: 'average line',&nbsp; &nbsp; type: 'average'&nbsp; },{&nbsp; &nbsp; symbol: 'circle',&nbsp; &nbsp; symbolSize: 30,&nbsp; &nbsp; name: 'max line',&nbsp; &nbsp; type: 'max'&nbsp; }]}&nbsp; var myChart = echarts.init(document.getElementById('main'));&nbsp; // Unsert your code below&nbsp; var option = {&nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; data: ["1", "2", "3", "4", "5", "6"]&nbsp; &nbsp; },&nbsp; &nbsp; yAxis: {},&nbsp; &nbsp; series: [{&nbsp; &nbsp; &nbsp; name: 'Series1',&nbsp; &nbsp; &nbsp; stack: '1',&nbsp; &nbsp; &nbsp; type: 'bar',&nbsp; &nbsp; &nbsp; data: [5, 20, 36, 10, 10, 20],&nbsp; &nbsp; &nbsp; markLine: {&nbsp; &nbsp; &nbsp; &nbsp; data: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbol: 'diamond',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbolSize: 30,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'average line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'average'&nbsp; &nbsp; &nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbol: 'circle',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbolSize: 30,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'max line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'max'&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }]&nbsp; }&nbsp; 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>