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 line

let setPointLines = [];

for (const setPoint of graphSetPointLinesFixed) {

  setPointLines.push({

    name:parseFloat(setPoint),

    yAxis:parseFloat(setPoint)

  });

}

总的来说，此代码创建了可以打开和关闭的设定点，如图所示。我不知道这是什么时候成为设置 markLines 的方法，但它适用于 5.3 和 5.4。

Answer 3

您的符号声明有误，请执行以下操作：

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>