Горизонтальная полоса диаграммы Сделать метку диаграммы за пределами полосы

В версии карт: 5.3.3

Можно ли сделать метку (см. номера 630230, 131744 и т.д.) за пределами панели, как здесь на изображении

Я могу сделать с этим codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx как на изображении ниже, где метка идет за баром,

Мне нравится держать метку за пределами диаграммы, как на первом изображении, кто-нибудь мог сделать это раньше?

Заранее благодарю за любую помощь.

const options = {
  title: {
    text: "World Populationss",
    show: false
  },
  tooltip: {
    trigger: "axis",
    show: false,
    axisPointer: {
      type: "none"
    }
  },
  legend: { show: false },
  grid: null,
  xAxis: {
    type: "value",
    show: false,
    axisLine: {
      show: false
    },
    z: 2,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: "{value}",
      color: "#FFF", //var(--primary-text-color)
      inside: false,
      // ...
      show: true
    }
    // boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: "category",
    data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    show: true,
    position: "left",
    axisLine: {
      show: false
    },
    z: 3,
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#FFF", //var(--primary-text-color)
      inside: true,
      // ...
      show: true
    },
    nameLocation: "start"
  },
  series: [
    {
      name: "2022",
      type: "bar",
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      label: {
        show: true,
        position: "top",
        formatter: "{c}",
        // position:"insideRight",
        position: ["100%", "50%"]
      },
      yAxis: {
        position: "top"
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#008D8E" // --histogram-item-gradient-background
            },
            {
              offset: 1,
              color: "#24C1C3" // color at 100%
            }
          ],
          global: false // default is false
        },
        borderRadius: 4,
        normal: {
          label: {
            show: true,
            position: "outside"
          }
        }
      }
    }
  ]
};
const App: React.FC = () => {
  return (
    <ReactECharts
      theme = {"dark"}
      style = {{ height: 400, width: 400 }}
      option = {options}
      opts = {{ renderer: "svg" }}
    />
  );
};

export default App;

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

javascript echarts

19.04.2023 13:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

146

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Насколько я вижу, метки всегда расположены относительно полос, поэтому нет возможности разместить их справа.

Однако эффект, который вы ищете, может быть достигнут путем создания вторичной оси y, размещения этой оси справа от графика и установки меток этой оси на сами значения.

Требуются и другие настройки:

установка max оси x на максимальное значение данных, чтобы избежать установки максимума на круглое значение, которое создаст пробел справа.
установка grid.containLabel на true, чтобы обеспечить масштабирование графика таким образом, чтобы метки вторичной оси y не были обрезаны.

const data = [18203, 23489, 29034, 104970, 131744, 630230];
const myChart = echarts.init(document.querySelector('#chart'), 'dark');
const options = {
    title: {
        text: "World Populationss",
        show: false
    },
    tooltip: {
        trigger: "axis",
        show: false,
        axisPointer: {
            type: "none"
        }
    },
    legend: { show: false },
    grid: {containLabel: true},
    xAxis: {
        type: "value",
        show: false,
        axisLine: {
            show: false
        },
        max: Math.max(...data),
        z: 2,
        axisTick: {
            show: false
        },
        axisLabel: {
            formatter: "{value}",
            color: "#FFF", //var(--primary-text-color)
            inside: false,
            show: true
        },
        boundaryGap: [0, 0.01]
    },
    yAxis: [{
        type: "category",
        data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
        show: true,
        position: "left",
        axisLine: {
            show: false
        },
        z: 3,
        axisTick: {
            show: false
        },
        axisLabel: {
            color: "#FFF", //var(--primary-text-color)
            inside: true,
            // ...
            show: true
        },
        nameLocation: "start"
    },
    {
        type: "category",
        data: data,
        position: "right",
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: "#FFF", //var(--primary-text-color)
            inside: false,
            show: true
        },
    }],
    series: [
        {
            name: "2022",
            type: "bar",
            data: data,
            label: {
                show: false,

                formatter: "{c}",

                position: "right",
                distance: 0
            },

            itemStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#008D8E" // --histogram-item-gradient-background
                        },
                        {
                            offset: 1,
                            color: "#24C1C3" // color at 100%
                        }
                    ],
                    global: false // default is false
                },
                borderRadius: 4
                // normal: {
                //   label: {
                //     show: true,
                //     position: ["100%", "50%"]
                //   }
                // }
            }
        }
    ]
};
myChart.setOption(options);

<div id = "chart" style = "width: 400px;height: 400px"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

Вот вилка вашего приложения для реагирования

19.04.2023 16:00

Другие вопросы по теме

Как я могу показать метки на графике echarts4r, но только каждые 2 или 3 бара?

Нестандартное масштабирование осей X и Y в диаграммах Grafana Apache

Часы не работают при обновлении данных диаграммы EChart в Vue

Echarts4r - как правильно выровнять значения в пользовательской всплывающей подсказке?

Как раскрасить отдельные блоки диаграммы echarts в зависимости от функции

Переместите ось X ниже нулевой линии в электронных диаграммах для R

Echarts: как отключить масштабирование и анимацию в древовидной карте echarts?

Анимация панели Apache ECharts?

Как обрабатывать асинхронные данные с помощью vue-echarts?

Как сделать Apache eCharts НЕ кликабельным?

Горизонтальная полоса диаграммы Сделать метку диаграммы за пределами полосы

Ответы 1

Другие вопросы по теме

Похожие вопросы