自定义系列：花瓣图

v1.0.2+

option 配置示例

const randomNum = 30;
const color = ["#4D5999", "#3DB4CC", "#F2A355", "#458BD1", "#F261AA"];
const legendData = ["legend0", "legend1", "legend2", "legend3", "legend4"];
// 花瓣在Y轴方向上的值集合
const data = new Array(randomNum)
  .fill()
  .map(() => Math.round(Math.random() * 100));
// 花瓣权重
const weightData = new Array(randomNum)
  .fill()
  .map(() => new Array(5).fill().map(() => Math.round(Math.random() * 100)));
// [
//   // 花瓣1，花瓣2，花瓣3，花瓣4，花瓣5
//   [0, 2, 3, 4, 5],
//   [5, 4, 3, 2, 1],
// ]
const xAxisData = new Array(randomNum)
  .fill()
  .map(() => "日期" + Math.round(Math.random() * 100));

const lineData = new Array(randomNum)
  .fill()
  .map(() => Math.round(Math.random() * 100));

const option = {
  legend: {
    type: "plain",
    data: [...legendData],
  },
  xAxis: {
    type: "category",
    data: xAxisData,
    axisLabel: {
      hideOverlap: true,
      dvIntervalStrategy: "",
    },
  },
  yAxis: [
    {
      type: "value",
      name: "",
      max: 100,
      min: 0,
      alignTicks: true,
    },
  ],
  graphic: {
    elements: [],
  },
  grid: {
    bottom: 50,
    right: 60,
    top: 60,
    left: 60,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  color: color,
  dataZoom: [
    {
      type: "slider",
    },
  ],
  series: [],
};
const chart = standardChart.init("chart", "pc-app-light");
window.standardChart = standardChart;
window.chart = chart;

// 辅助函数绘制花瓣图
const handleRenderSeries = standardChart.helper.petalHelper.handleRenderSeries(
  data,
  weightData,
  legendData
  // {
  //   minScale: 0.5,
  //   maxScale: 1.5,
  //   minDistance: 100
  // },
);

/**
 * 注意:custom系列图形放置于sereis最前面，方便辅助函数处理花瓣位置！
 */
option.series = [...handleRenderSeries, ...option.series];
chart.play({
  option,
});

// ！！！以下代码为交互事件，偏向于业务，供参考
// 饼图数据
let pieData = [
  { value: 1048, name: "Search Engine" },
  { value: 735, name: "Direct" },
  { value: 580, name: "Email" },
  { value: 484, name: "Union Ads" },
  { value: 300, name: "Video Ads" },
];
color.forEach((item, index) => {
  pieData[index].itemStyle = {
    color: item,
  };
});
chart.on("mouseover", function (params) {
  if (params.seriesType === "custom" || params.seriesType === "scatter") {
    chart
      .getECharts()
      .dispatchAction({
        type: "dvPetalShowHidden",
        dataIndex: params.dataIndex,
        state: false,
      });
  }
});

chart.on("mouseout", function (params) {
  chart
    .getECharts()
    .dispatchAction({
      type: "dvPetalShowHidden",
      dataIndex: params.dataIndex,
      state: true,
    });
});
// legend状态
let legendStatus;

// 点击花瓣，展开饼图事件
chart.on("click", function (params) {
  // 获取当前节点xy轴的数据,进而转换成坐标数据
  const postion = chart.__echarts.convertToPixel(
    { xAxisIndex: 0, yAxisIndex: 1 },
    [params.dataIndex, params.value]
  );
  // 只针对点击花瓣及花心做饼图展示处理
  if (params.seriesType === "custom" || params.seriesType === "scatter") {
    option.series = option.series.filter((item) => item.type !== "pie");
    option.series = [
      ...option.series,
      {
        name: "Access From",
        type: "pie",
        animation: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        z: 53,
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        radius: [4, 48.6], // 此处尺寸写死了，依据是花瓣的最大尺寸
        center: postion,
        data: legendStatus
          ? pieData.filter((item, index) => legendStatus[index])
          : pieData,
      },
    ];
    chart.play({
      option,
    });
  } else if (params.seriesType === "pie") {
    deletePie();
  }
});
// datazoom事件
chart.on("datazoom", function () {
  if (option.series.some((item) => item["type"].includes("pie"))) {
    deletePie();
  }
});
// legend点击事件
chart.on("legendselectchanged", function (params) {
  if (option.series.some((item) => item["type"].includes("pie"))) {
    setTimeout(() => {
      deletePie();
    });
  }
  legendStatus = Object.values(params.selected);
});

// 画布点击事件
chart.on("finished", function () {
  chart
    .getECharts()
    .getZr()
    .on("click", (e) => {
      if (
        e.target === undefined &&
        option.series.some((item) => item["type"].includes("pie"))
      ) {
        deletePie();
      }
    });
});
// 删除饼图
function deletePie() {
  option.animation = false;
  option.series = option.series.filter((item) => item.type !== "pie");
  chart.play({
    option,
    opts: {
      replaceMerge: ["series"],
      lazyUpdate: true,
    },
  });
}

dispatchAction 新类型（dvPetalShowHidden）

为满足当前花瓣隐藏与显示的交互逻辑，在此注册一个新的 dispatchAction 事件类型

chart
  .getECharts()
  .dispatchAction({
    type: "dvPetalShowHidden",    //类型
    dataIndex: params.dataIndex,  //当前交互元素的索引
    state: false,                 //设定当前元素的显隐状态
  });

辅助函数 petalHelper

参数介绍详情见petalHelper