Tenho este gráfico com intervalos de 7 para divisões e rótulos. O eixo X inferior está correto ao começar em 0 e mostrar intervalos em cada 7 valores. Para o eixo superior, quero fazer o mesmo, mas para alinhar com os pontos da série, basicamente 1 valor para a esquerda. Não consigo descobrir como deslocá-lo.
Tenho um mapa de calor com markLines verticais para certos valores x. No momento, a linha vertical está aparecendo no meio do índice do eixo x que eu especifico. Isso corta a célula do mapa de calor pela metade e é confuso para usuários que procuram o limite entre certos itens. É possível usar opções integradas para que essa linha vertical apareça no limite direito do índice do eixo x especificado?
Aqui está a parte relevante do meu JavaScript de opção do eChart:
series: [
{
type: 'heatmap',
data: mutation_map_data,
color: colorPalette,
markLine: {
silent: true,
data: position_boundaries,
lineStyle: {
width: 5,
color: "white",
}
},
...
]
Onde a variável position_boundaries é uma matriz de itens do formato:
{"symbol": "none", "xAxis": index, "name": current_position}
Estou aprendendo a usar eCharts e testando diferentes tipos. Cortei e colei dois tipos de barras de eChart, um com drill down (id = main2) e um horizontal com valores negativos (id = main1); dispostos em uma única linha de tabela.
Ambos renderizam corretamente, e o drill down funciona bem; o botão voltar funciona como esperado e exibe o gráfico de barras inicial adequado; exceto que ele permanece visível no nível superior do gráfico após voltar. Atualizar a página o remove.
<head>
<meta charset='utf-8' />
</head>
<body>
<table class="container-drilldown" >
<thead>
</thead>
<tbody>
<tr>
<td class='drilldown' class ='center' id='main2' style='width: 30vw; height:45vh' >
<script type='text/javascript'>
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option = {
xAxis: {
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {},
dataGroupId: '',
animationDurationUpdate: 500,
series: {
type: 'bar',
id: 'sales',
data: [
{
value: 5,
groupId: 'animals'
},
{
value: 2,
groupId: 'fruits'
},
{
value: 4,
groupId: 'cars'
}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
}
}
};
const drilldownData = [
{
dataGroupId: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
},
{
dataGroupId: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
{
dataGroupId: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}
];
myChart.on('click', function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
})
},
series: {
type: 'bar',
id: 'sales',
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: 'clone'
}
},
graphic: [
{
type: 'text',
left: 50,
top: 20,
style: {
text: 'Back',
fontSize: 18
},
onclick: function () {
myChart.setOption(option);
}
}
]
});
}
});
option && myChart.setOption(option);
</script>
</td>
<td class='drilldown' class ='center' id='main1' style='width: 30vw; height:45vh' >
<script type='text/javascript'>
var chartDom1 = document.getElementById('main1');
var myChart1 = echarts.init(chartDom1);
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Profit', 'Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: 'Profit',
type: 'bar',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
option && myChart1.setOption(option1);
</script>
</td>
</tr>
Existe uma maneira de criar uma borda ao redor no Apache eChart? Eu olhei nos documentos, tentei várias combinações, mas não consigo colocar uma borda ao redor de um gráfico.
Eu os tenho em uma tabela e posso adicionar bordas dessa forma, mas poder adicioná-los ao gráfico e não à tabela seria legal.
Aqui está um gráfico com o qual estou tendo problemas.
O problema é que se você alterar qualquer um dos valores de dados, os rótulos desaparecem no gráfico de funil. Meu objetivo é manter os rótulos no lado direito da tela, mesmo se eu alterar os valores de dados.
atualizar dinamicamente qualquer um dos valores sem recarregar o gráfico.
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
]
Preciso ter o rótulo no lado direito da tela e a única maneira que sei de fazer isso é com a opção labelLayout. O problema é que, quando essa opção é incluída, o problema ocorre.
Tentei consultar a documentação e outras questões com echarts, mas não obtive sucesso.
Estou trabalhando em um projeto angular 17, mas você pode ver o problema no exemplo acima usando o site echarts.
Eu gostaria de criar um gráfico como este no ECharts:
Então, alguém tem alguma idéia? Tentei usar um exemplo da página ECharts, mas não parece ser minha IU. Fiz uma fileira de pontos, mas não consigo esticar o círculo em um retângulo com raio, lembre-se dos 2 meios círculos azuis acima e abaixo
https://echarts.apache.org/examples/en/editor.html?c=pie-parliament-transition
Nos echarts do Apache, quero criar layouts mais avançados, semelhantes a matplotlib gridspeclinhas e colunas, abrangendo plotly. Isso é factível? Por exemplo é possível fazer esse layout em echarts?
Estou tentando criar duas markLines com minhas médias (anual e nas últimas 13 semanas), a primeira markline será minha média anual com uma pequena posição de dica de ferramenta por volta de janeiro. Meu segundo será minhas médias das últimas 13 semanas com uma pequena posição por volta de julho. A captura de tela abaixo é o que eu tenho.
Aqui está uma captura de tela da pequena dica de ferramenta. Tem que ser uma linha de marcação também.
Aqui estão minhas opções. MarkLine não aparece.
xAxis: [
{
type: "category",
data: Object.keys(resultObject),
show: false,
},
{
position: "bottom",
type: "category",
data: categories.map((category) => category.charAt(0)),
xAxisIndex: 2,
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
yAxis: {
show: false,
type: "value",
},
series: [
{
data: Object.values(resultObject),
type: "bar",
itemStyle: {
color: (seriesIndex) =>
seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
},
markLine: {
data: {
name: "Horizontal line with Y value at 100",
yAxis: 100,
},
},
},
],