Заменить код диаграммы атрибута data-ui-options

Я новичок в этом, и я хотел бы знать, как я могу заменить код диаграммы на атрибут data-ui-options без JQUERY.

<div id = "graficoHell" data-ui-jp = "echarts" data-ui-options = "{
          xAxis: {
              data: ['a', 'b', 'c', 'd'],
              axisTick: {show: false},
              axisLabel: {
                  formatter: 'barGap: \'-100%\''
              }
          },
          yAxis: {
              splitLine: {show: false}
          },
          animationDurationUpdate: 1200,
          series: [{
              type: 'bar',
              itemStyle: {
                  normal: {
                      color: '#ddd'
                  }
              },
              silent: true,
              barWidth: 40,
              barGap: '-100%', // Make series be overlap
              data: [60, 60, 60, 60]
          }, {
              type: 'bar',
              barWidth: 40,
              z: 10,
              data: [4, 60, 13, 25]
          }]
      } " style = "height:300px" >

Я попробовал тот же код, что и строка, в JavaScript, но это не сработало.

$('#graficoHell').attr('data-ui-options', "same_string_into_data-ui-options");

Во всех примерах, которые я видел, использовался объект echarts, но шаблон, который я купил, именно такой.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
135
1

Ответы 1

Хотя это старый вопрос, я все равно могу на него ответить. Вы можете использовать функцию element.dataset для запроса / изменения данных элемента html.

Запрос данных в соответствии с документация:

<div id = "user" data-id = "1234567890" data-user = "johndoe" data-date-of-birth>John Doe</div>


const el = document.querySelector('#user');

// el.id == 'user' 
// el.dataset.id === '1234567890'  
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

Обновление данных:

const el = document.querySelector('#user');
el.dataset.dateOfBirth = '1960-10-03'; 

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