Echarts Stacked Bar Hard / Waterfall Dicart не может создать ⇐ Javascript

[Anonymous]

Я пытаюсь создать картингу с уклаженным баром / график водопада, и у меня возникает много трудностей. Я использую Echarts с Vue, но структура не имеет большого значения. Любая помощь, касающаяся настройки этого в Echarts, была бы чрезвычайно полезна! src = "https://i.sstatic.net/ajixvyp8.png"/>
Следующий код - это то, что я в итоге получил, что просто создает случайно сгенерированные данные в виде макета.
import { defineComponent, ref, onMounted } from 'vue';
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

export default defineComponent({
components: {
VChart,
},
setup() {
const timeIntervals = ref([]);

const updateTimeIntervals = () => {
const intervals = [];
let startTime = new Date();
startTime.setMinutes(0, 0, 0);
for (let i = 0; i < 8; i++) { // 8 hours with 1-hour intervals
intervals.push(
startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
);
startTime.setHours(startTime.getHours() + 1);
}
timeIntervals.value = intervals;
};

onMounted(updateTimeIntervals);

const chartOptions = ref({
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
},
xAxis: {
type: 'category',
data: timeIntervals,
axisLabel: { rotate: 45 },
},
yAxis: {
type: 'value',
min: -100,
max: 100,
},
series: [
{
name: 'Category A',
type: 'bar',
stack: 'total',
data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
color: '#5470c6',
},
{
name: 'Category A (Duplicate)',
type: 'bar',
stack: 'total',
data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
color: '#91cc75',
},
{
name: 'Category B',
type: 'bar',
stack: 'total',
data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
color: '#fac858',
},
{
name: 'Category C',
type: 'bar',
stack: 'total',
data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
color: '#ee6666',
},
{
name: 'Category D',
type: 'bar',
stack: 'total',
data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
color: '#73c0de',
},
],
});

return { chartOptions, timeIntervals };
},
});
< /code>
Приведенный выше код генерирует что -то вроде этого, которое имеет несколько HTING, где элементы перекрываются, не центрированы в 0 (это из -за фиктивных данных), и это обычно не то, что я хочу. Но это самый дальний, я пришел:


Подробнее здесь: https://stackoverflow.com/questions/795 ... -to-create