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

Question

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

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

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

Replace chart code of data-ui-options attribute

javascript

jquery

json

echarts