Echarts_MarkLine_CustomSymbol

by tmtron

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

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

const SymbolEmptyCircle =
  'path://M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 ' +
  '8 3.59 8 8-3.59 8-8 8z';


// 'circle', triangle,, diamond, arrow, pin
const startSymbol = SymbolEmptyCircle;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log'
  },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    markLine: {
      data: [
        [{
          name: 'start',
          coord: [0, 50],
          label: {
            formatter: name,
            position: 'end'
          },
          lineStyle: {
            color: 'blue'
          },
          symbol: startSymbol,
          symbolSize: 10,
          symbolKeepAspect: true,
          symbolOffset: [50, '10%']
        }, {
          name: 'end',
          coord: [1, 500],
          symbol: 'rect',
          symbolSize: [10, 30],
          symbolOffset: [25, 25]
        }]
      ]
    }
  }]
};


myChart.setOption(option);