Echarts自定义标签带图标

Question

是否可以在 eCharts 中执行此操作？除了当前值之外，我还需要添加此标签。

我几乎成功地重现了上面的图像。但是我需要根据Label返回的内容更改Symbol，并将其颜色更改为绿色或红色。

文档中没有在 Symbol 中使用函数的选项，只有 String。

这是我设法做到的结果。

这就是完整的代码。

如果我在 Symbol 上使用函数，那就是错误。

Answer 1

是的，这是可能的。请看一下example，这似乎是你需要的

Answer 2

在Echarts中symbol像formatter一样可以得到returning path://...的功能。因此你需要检查 positive/negative 上的 value/percent 和 return 对应的箭头：symbol: (...params) => { ... return 'path://....' }.

但在你的情况下，我会建议另一种方法来避免代码复杂性：生成已经完整的系列以插入图表而不是实时计算。


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

  var upPath = "path://M88 264l31 31 123-122 0 268 44 0 0-269 123 124 32-32-177-176Z";
  var dwPath = "path://M441 264l-32-31-123 123 0-268-44 0 0 268-123-123-31 31 176 176Z";

  var option = {
    // ... all necessary options

    series: [],  // <------ leave blank

    // ... something else if you need
  };

  function calculatePercent( ... ){ ... }
  // ... another utility functions

  var chartData = [ ... ];

  var seriesData = chartData.map(data => {
    // Calculate data for each series
    // and return series object

    return {
        name: seriesName,
        type: 'bar',
        barGap: "5%",
        label: labelFormat,
        itemStyle: {
          color: "#40698D",
          barBorderRadius: [5, 5, 0, 0]
        },
        data: [ ... ]  // <----- insert chart data here
      }
  });

  // Merge option with series data
  Object.assign(option, { series: seriesData });

  // And initialize chart with complete data
  myChart.setOption(option);

Echarts自定义标签带图标

Echarts custom label with icon

label

echarts

angular