1

I want to realize echart legend icon with line

I want to implement a circle icon with horizontal lines as show in fig. 1. fig. 1 circle icon with lines

Friends online say line is the default, but my echart has no line. My echart version is "echarts": "^5.4.0", and echarts options configuration is as follow:

dataVolumeOptions: {
        legend: {
          show: true,
          icon: 'circle',
          bottom: '0',
          width: "auto", 
          height: "auto",
          orient: "vertical",
          align: "auto",
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 10,
          data: [{
            name: "data-size",
            itemStyle: {
              color: "#FFFFFF",
              borderColor: '#1088FF',
              borderWidth: 2,
            },
            textStyle: {
              color: "#000",
              fontSize: 14
            },
          }]
        },
        xAxis: {
          data: ['2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00']
        },
        yAxis: {},
        series: [
          {
            name: "data-size",
            type: 'line',
            label: {
              show: true,
              position: 'top',
              fontSize: 14
            },
            data: [10, 22, 28, 23, 19],
          }
        ]
      }
    }
Improve this question
1
  • Changed your code and put an executable example, see if now I understand correctly what you want.
    – Danilo Fagundes
    Commented Apr 26, 2023 at 3:15

2 Answers 2

Reset to default
1

I think I understand what you need. I changed the code a lot, see if this is the result you want.

The legend icon was added, in this case with the name "Blue line". This icon is a standard feature of ECharts, running your original code it really doesn't show up.

Below is the updated code with the executable example.

      var grafico = echarts.init(document.getElementById('grafico'));
      var dataVolumeOptions = {
  title: {
    text: 'test code'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Blue line']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Blue line',
      type: 'line',
      stack: 'Total',
      data: [10, 22, 28, 23, 19]
    },
  ]
};
      grafico.setOption(dataVolumeOptions);
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplo ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="grafico" style="width: 600px; height: 200px;"></div>
  </body>
</html>

Improve this answer
3
  • Thank you for answering. I tried what you suggested and it didn't work. 😂
    – Anson
    Commented Apr 26, 2023 at 1:50
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Apr 26, 2023 at 12:42
  • Thanks again. I runned your code supplied, it works. I am find the key point that causes the difference between my origin code and yours.
    – Anson
    Commented Apr 27, 2023 at 1:48
1

I found the reason that my lengend icon with no line. itemWidth is too low and itemStyle.color cannot be '#FFFFFF'. The correct setting should be:

legend: {
      show: true,
      icon: 'circle',
      bottom: '0',
      width: "auto", 
      height: "auto",
      orient: "vertical",
      align: "auto",
      itemWidth: 30, // correct this
      itemHeight: 10,
      itemGap: 10,
      data: [{
        name: "data-size",
        itemStyle: {
          color: "#1088FF", // correct this
          borderColor: '#1088FF',
          borderWidth: 2,
        },
        textStyle: {
          color: "#000",
          fontSize: 14
        },
      }]
    },
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.