What problem does this feature solve?

Feature description:

At my organization, we recently started migrating our data visualizations to ECharts and our product has many features that depend on standard HTML data attributes. The ability to specify data attributes on chart components such as, the data items, axis labels, etc. would be wonderful.

I was able to come up with a pattern to work around the lack of this feature. I essentially insert my data into a label
that uses rich formatting to hide it ( opaciy: 0 , etc...). Then during my chart's instance's finished lifecycle
event, I select all text elements with a specific text pattern, and then parse their text. This content will then be
applied to the hidden text element as data attributes.

This feature would be really awesome, and I would be happy to work on it.

Here's an example of how I would set data attributes on the dots of a scatter plot using the above pattern.

class SomeScatterChart {
  constructor(d) {
    // ...
    this.options = {
      series: [
        {
          // scatter series option
          // ...
          // scatter dot label to be parsed into data attribute
          label: {
            show: true,
            slient: true,
            rich: {
              dataAttr: {
                opacity: 0,
                width: 0,
                height: 0,
              },
            },
            formatter: ({ data }) => {
              return `{dataAttr|${this._formatDataAttribute({
"echarts-instance-id": this.instance.id,
value: data.value,
})}}`;
            },
          }
          // ...
        }
      ]
    }
    // ...
  }

  mountInstance(el) {
    // initialize ECharts instance with HTML element `el`
    // register callback function to invoke `_parseTextDataAttributes` when lifecycle event `finished` occurs
    // set chart options to `this.options`
  }

  _parseTextDataAttributes() {
    // select all SVG `text` elements whom are children of the ECharts instance's container element
    // filter selected elements by those whose inner HTML have the phrase `data-attr-anchor=true` (`el`)
    // for each of these elements (`d`), split their inner HTML by commas
    // for each of these strings (`t`), split them by equals to create a pair of `attibute` and `value`
    // set a data attribute with the name `attribute` and value of `value` the element `d`
  }

  _formatDataAttribute(data) {
    // reduce specified data by keys (`k`)
    // create string with the pattern of `data-<k>=<data[k]>,` + previous iteration 
    // initial string will be `data-attr-anchor=true`
    // return the created string
  }
}

What does the proposed API look like?

Proposed API

The API that I have in mind would behave similarly to that of the current ECharts label formatter function. It would be
a function that accepts an object with a data property. This property would directly correlate with the data in the
series. It would return an object with the exact properties which are to be added as data attributes to the element.

The function should be able to return an object with string keys. The API should be able to convert any key which
are camelCase to kabob-case .

// ...
options = {
  series: [
    {
      // scatter series option
      dataAttibutes: ({ data }) => {
        return {
          id: data.id,
          value: data.value,
          productName: data.name
        }
      }
    }
  ]
}
// ...

Example:

Given, a chart will have the following data:

data = [
  {
    id: '1-a',
    value: '42',
    name: 'cylon',
  },
  {
    id: '1-b',
    value: '22',
    name: 'pyramid ball',
  },
]

The rendered chart will contain the following SVG path elements:

<path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(...)" fill="red" data-id="1-a" data-value="42" data-product-name="cyclon"></path>
<path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(...)" fill="red" data-id="1-b" data-value="22" data-product-name="pyramid ball"></path>