替换 data-ui-options 属性的图表代码答案

【问题标题】：Replace chart code of data-ui-options attribute替换 data-ui-options 属性的图表代码
【发布时间】：2018-09-28 22:14:58
【问题描述】：

我是新手，我想知道如何将图表代码替换为属性 data-ui-options unsing 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对象，但是我买的模板是这样的。

【问题讨论】：

标签： javascript jquery json echarts

【解决方案1】：

尽管这是一个老问题，但我还是可以回答。您可以使用 element.dataset 函数来查询/更改 html 元素的数据。

根据documentation查询数据：

<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';

【讨论】：