为echarts图例图标添加一行

问题描述 投票：0回答：1

想用线条实现echart图例图标

我想实现一个带有水平线的圆形图标，如图所示。 1. fig. 1 circle icon with lines

网上的朋友说line是默认的，但是我的echart没有line。我的echarts版本是“echarts”:“^5.4.0”，echarts选项配置如下：

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],
          }
        ]
      }
    }
javascript legend echarts
1个回答
0
投票

我想我明白你需要什么。我改了很多代码，看看这是不是你想要的结果

      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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.