Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/basic-radar-chart-forked-g4t27z?file=%2Findex.js%3A128%2C11

Steps to Reproduce

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Basic Radar Chart - Apache ECharts Demo</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});
var app = {};

var option;

option = {
  grid: {
    containLabel: true,
  },
  title: {
    text: "Basic Radar Chart",
  },
  legend: {
    data: ["Allocated Budget", "Actual Spending"],
  },
  tooltip: {
    show: true,
    trigger: "axis",
  },
  axisPointer: {
    show: true,
  },
  radar: {
    // shape: 'circle',
    triggerEvent: true,
    axisName: {
      color: "rgba(32, 33, 38, 0.58)",
    },
    axisLine: {
      lineStyle: {
        color: "#E9E9E9",
        type: "dashed",
      },
    },

    splitNumber: 2,
    splitLine: {
      lineStyle: {
        width: 2,
        color: "#E9E9E9",
      },
    },
    splitArea: {
      show: false,
    },
    indicator: [
      { name: "社交指数", max: 6500 },
      { name: "内容指数", max: 16000 },
      { name: "性价比指数", max: 38000 },
      { name: "成长指数", max: 52000 },
      { name: "商业指数", max: 30000 },
    ],
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      data: [
        {
          value: [4200, 3000, 20000, 35000, 30000],
          name: "创作者",
          lineStyle: {
            color: "rgba(61, 126, 255)",
            width: 2,
          },
          areaStyle: {
            color: "rgba(61, 126, 255)",
            opacity: 0.1,
          },
          itemStyle: {
            opacity: 0,
            color: "rgba(61, 126, 255)",
            borderWidth: 3,
            borderColor: "white",
            shadowColor: "rgba(41, 107, 239, 0.3)",
            shadowBlur: 4,
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
            },
          },
        },
        {
          value: [5000, 14000, 28000, 26000, 30000],
          name: "行业均值",
          lineStyle: {
            color: "rgba(51, 210, 203)",
            width: 2,
          },
          areaStyle: {
            color: "rgba(51, 210, 203)",
            opacity: 0.1,
          },
          itemStyle: {
            opacity: 0,
            color: "rgba(51, 210, 203)",
            borderWidth: 3,
            borderColor: "white",
            shadowColor: "rgba(51, 210, 203, 0.3)",
            shadowBlur: 4,
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
            },
          },
        },
      ],
    },
  ],
};

if (option && typeof option === "object") {
  myChart.setOption(option);
  myChart.on("rendered", () => {
    console.log("rendered");
    console.log(
      "get pixcel",
      myChart.convertToPixel(
        {
          seriesIndex: 0,
          dataIndex: 0,
        },
        [4200, 3000, 20000, 35000, 30000]
      )
    );
  });
}

window.addEventListener("resize", myChart.resize);

Current Behavior

返回值是 undefined

Expected Behavior

希望可以返回每个值的坐标值

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

2条答案

按热度按时间

gupuwyp21#

@zhengpq It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED

TITLE

The convertToPixel api of the radar chart cannot obtain the coordinates, and the return value is undefined

赞(0）回复(0）举报 5个月前

lndjwyie2#

radar has no coordinate system, so convertToPixel would not work, see #19182

echarts 雷达图的 convertToPixel api 无法获取到坐标，返回值为 undefined