I need to implement a scale diagram like the one shown in the following chart.
我try 用Etcharts 5.5.0用boxplot创建这个比例哈特.
Here the code : https://codesandbox.io/p/sandbox/error-bar-on-catesian-v9vmmk?file=%2Findex.js
然而，我无法定义和完成我的图表.
有什么 idea 吗？
提前感谢您.
Ben
为了简化示例，我使用固定值而不是生成随机值.
在您的示例中，您将类别与X轴关联起来.如果您想创建水平图表，则应该将它们与Y轴关联.
您可以使用api.coord()来计算值从到的位置.这里，X轴和Y轴的值必须以相反的方式输入.
经过这两个修改，我们就得到了水平图.由于您没有提供更多信息，我只能假设这就是意图.
图表上的照片上有一条额外的中间线，称为Mid Value.为此，您只需取最大值和最小值的平均值即可.我增加了线的高度，并将其厚度增加了一倍.
/**
** Initialize
*/
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);
/**
** Data
*/
const categoryData = ['category0', 'category1', 'category2', 'category3', 'category4'];
const barData = [30, 50, 70, 60, 80];
const errorData = [
['category0', 10, 40],
['category1', 30, 60],
['category2', 50, 80],
['category3', 40, 70],
['category4', 60, 90]
];
/**
** Option
*/
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: 'Horizontal Boxplot'
},
legend: {
data: ['bar', 'error']
},
yAxis: {
type: 'category',
data: categoryData
},
xAxis: {},
series: [
{
type: 'bar',
name: 'bar',
data: barData,
itemStyle: {
color: '#cce0ff'
}
},
{
type: 'custom',
name: 'error',
itemStyle: {
borderWidth: 1.5
},
renderItem: function (params, api) {
const yValue = api.value(0);
const lowPoint = api.coord([api.value(1), yValue]);
const midPoint = api.coord([(api.value(1) + api.value(2)) / 2, yValue]);
const highPoint = api.coord([api.value(2), yValue]);
const halfHeight = api.size([1, 1])[1] * 0.1;
const style = api.style({
stroke: api.visual('color'),
fill: undefined
});
return {
type: 'group',
children: [
// Line
{
type: 'line',
transition: ['shape'],
shape: {
x1: lowPoint[0],
y1: lowPoint[1],
x2: highPoint[0],
y2: highPoint[1]
},
style: style
},
// Low Value
{
type: 'line',
transition: ['shape'],
shape: {
x1: lowPoint[0],
y1: lowPoint[1] - halfHeight,
x2: lowPoint[0],
y2: lowPoint[1] + halfHeight
},
style: style
},
// Mid Value
{
type: 'line',
transition: ['shape'],
shape: {
x1: midPoint[0],
y1: midPoint[1] - halfHeight * 2,
x2: midPoint[0],
y2: midPoint[1] + halfHeight * 2
},
style: {...style, lineWidth: style.lineWidth * 2}
},
// High Value
{
type: 'line',
transition: ['shape'],
shape: {
x1: highPoint[0],
y1: highPoint[1] - halfHeight,
x2: highPoint[0],
y2: highPoint[1] + halfHeight
},
style: style
}
]
};
},
encode: {
x: [1, 2],
y: 0
},
data: errorData,
z: 100
}
]
};
/**
** Render Chart
*/
chart.setOption(option);<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="chart" style="width: 650px; height: 250px;"></div>