我正在使用 ECHARTS，但我面临的问题特定于
Javascripttype: “custom”// Function to calculate the average of the values in an array
function calculateMean() {
return value.reduce((acc, val) => acc + val, 0) / value.length;
}
// Calculates the average of all values in the `value` array
const mean = calculateMean(value);
console.log(mean);
控制台返回：
custom.html:69 182.72499999999997
custom.html:69 195.885
custom.html:69 205.775
我需要这三个值的平均值，就像我在
calculateMean(182.72499999999997 + 195.885 + 205.775) / 3
194.795 // <-- I need this average value
所以，我需要使用值
194.795console.logvalueconst value = api.coord([api.value(0), api.value(1)]);
console.log(value)
custom.html:60 (2) [114.75, 250.69999999999996]
custom.html:60 (2) [175.95000000000002, 215.81999999999996]
custom.html:60 (2) [237.15000000000003, 174.39999999999998]
完整代码：
// system
const chartSystem = () => {
return {
"source": {
"custom": [
["x", "y", "groups"],
[1, 20, "group1"],
[2, 36, "group1"],
[3, 55, "group1"],
[4, 24, "group2"],
[5, 81, "group2"],
[6, 61, "group2"]
]
}
}
}
const pullDataset = [];
const chartSend = () => {
const { source } = chartSystem();
pullDataset.push(...Object.values(source).slice(0, 1).map(item => ({
source: item,
sourceHeader: true
})));
}
chartSend();
// echarts init
var chartUse = echarts.init(document.getElementsByClassName('chart')[0]);
function chartFrameSwitch0() {
// custom series
const series0 = [
{
type: 'custom',
datasetIndex: 0,
encode: {
x: 0,
y: 1,
itemGroupId: 2
},
renderItem: function (params, api) {
if (params.dataIndex < 3) {
const value = api.coord([api.value(0), api.value(1)]);
const size = api.size([api.value(0), api.value(1)]).map(resize => resize * 0.2);
// Function to calculate the average of the values in an array
function calculateMean() {
return value.reduce((acc, val) => acc + val, 0) / value.length;
}
// Calculates the average of all values in the `value` array
const mean = calculateMean(value);
console.log(value)
return {
type: 'group',
children: [
{
type: 'path',
shape: {
x: value[0] - size[0] / 2,
y: value[1] - size[1] / 2,
pathData: 'M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 64 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z',
width: size[0],
height: size[1]
},
style: {
fill: '#000',
lineWidth: .5,
stroke: '#f00',
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
{
type: 'circle',
shape: {
cx: mean,
cy: mean,
r: mean / 2
},
style: {
fill: '#dd4b39',
opacity: .2
}
}
]
}
} else if (params.dataIndex >= 3) {
const value = api.coord([api.value(0), api.value(1)]);
const size = api.size([api.value(0), api.value(1)]).map(resize => resize * 0.2);
return {
type: 'group',
children: [
{
type: 'path',
shape: {
x: value[0] - size[0] / 2,
y: value[1] - size[1] / 2,
pathData: 'M57.7 193l9.4 16.4c8.3 14.5 21.9 25.2 38 29.8L163 255.7c17.2 4.9 29 20.6 29 38.5l0 39.9c0 11 6.2 21 16 25.9s16 14.9 16 25.9l0 39c0 15.6 14.9 26.9 29.9 22.6c16.1-4.6 28.6-17.5 32.7-33.8l2.8-11.2c4.2-16.9 15.2-31.4 30.3-40l8.1-4.6c15-8.5 24.2-24.5 24.2-41.7l0-8.3c0-12.7-5.1-24.9-14.1-33.9l-3.9-3.9c-9-9-21.2-14.1-33.9-14.1L257 256c-11.1 0-22.1-2.9-31.8-8.4l-34.5-19.7c-4.3-2.5-7.6-6.5-9.2-11.2c-3.2-9.6 1.1-20 10.2-24.5l5.9-3c6.6-3.3 14.3-3.9 21.3-1.5l23.2 7.7c8.2 2.7 17.2-.4 21.9-7.5c4.7-7 4.2-16.3-1.2-22.8l-13.6-16.3c-10-12-9.9-29.5 .3-41.3l15.7-18.3c8.8-10.3 10.2-25 3.5-36.7l-2.4-4.2c-3.5-.2-6.9-.3-10.4-.3C163.1 48 84.4 108.9 57.7 193zM464 256c0-36.8-9.6-71.4-26.4-101.5L412 164.8c-15.7 6.3-23.8 23.8-18.5 39.8l16.9 50.7c3.5 10.4 12 18.3 22.6 20.9l29.1 7.3c1.2-9 1.8-18.2 1.8-27.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z',
width: size[0],
height: size[1]
},
style: {
fill: '#008cba',
lineWidth: .5,
stroke: '#000',
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
]
}
}
}
}
];
// component types
const tooltip0 = [
{
show: true
}
];
const grid0 = [
{
width: '40%',
height: '30%',
left: "5%",
top: '15%'
}
];
const xAxis0 = [
{
type: 'value',
min: 0,
max: 7
}
];
const yAxis0 = [
{
type: 'value',
min: 0,
max: 90
}
];
const option = {
dataset: [pullDataset[0]],
tooltip: tooltip0,
grid: grid0,
xAxis: xAxis0,
yAxis: yAxis0,
series: series0
};
// setOption
chartUse.setOption(option, { notMerge: true });
}
chartFrameSwitch0();<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<div class="chart" style="width: 100%; height: 100vh;"></div>您可以看到形成了三个圆圈，但只需一个，并应用平均值
194,795您面临的问题是因为您正在计算 renderItem 函数内的平均值，但您是针对每个单独的坐标集执行此操作，而不是计算所有坐标的平均值。
要解决这个问题，您需要将所有值坐标收集到一个数组中，计算这些坐标的平均值，然后使用该平均值作为圆的位置。您还应该计算 renderItem 函数外部的平均值并将其作为参数传递。
以下是调整代码的方法：
// Function to calculate the average of the values in an array
function calculateMean(values) {
return values.reduce((acc, val) => acc + val, 0) / values.length;
}
// Custom series rendering function
function chartFrameSwitch0() {
// Custom series
const series0 = [
{
type: 'custom',
datasetIndex: 0,
encode: {
x: 0,
y: 1,
itemGroupId: 2
},
renderItem: function (params, api) {
// Collecting all the value coordinates
const values = [];
// Collecting the first three points (or adjust as needed)
for (let i = 0; i < 3; i++) {
const value = api.coord([api.value(0, i), api.value(1, i)]);
values.push(value[0], value[1]);
}
// Calculate the mean of the collected values
const mean = calculateMean(values);
// Console log the mean
console.log(mean);
// Drawing the chart using the mean value
return {
type: 'group',
children: [
{
type: 'path',
shape: {
x: mean - 50, // Adjust the position based on the mean
y: mean - 50,
pathData: 'M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 64 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z',
width: 100,
height: 100
},
style: {
fill: '#000',
lineWidth: .5,
stroke: '#f00',
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
{
type: 'circle',
shape: {
cx: mean,
cy: mean,
r: 50
},
style: {
fill: '#dd4b39',
opacity: .2
}
}
]
};
}
}
];
// Component types
const tooltip0 = [
{
show: true
}
];
const grid0 = [
{
width: '40%',
height: '30%',
left: "5%",
top: '15%'
}
];
const xAxis0 = [
{
type: 'value',
min: 0,
max: 7
}
];
const yAxis0 = [
{
type: 'value',
min: 0,
max: 90
}
];
const option = {
dataset: [pullDataset[0]],
tooltip: tooltip0,
grid: grid0,
xAxis: xAxis0,
yAxis: yAxis0,
series: series0
};
// setOption
chartUse.setOption(option, { notMerge: true });
}
chartFrameSwitch0();
这应该可以解决您的问题，现在圆将根据前三个值坐标的平均值进行定位。将正确计算和使用平均值。