react-native-echarts icon indicating copy to clipboard operation
react-native-echarts copied to clipboard

[REQUEST] echarts.registerLocale has no documented use, so the use of compatible echarts languages are not available

Open ivantrejo41 opened this issue 1 year ago ‱ 1 comments

Is your feature request related to a problem? Please describe. IWhen I try to modify the language of the charts engine using this package because there is no information on how to use the “registerLocale” function from the echarts core library. This makes it challenging to customize the charts for different languages and locales, which is crucial for internationalization.

Describe the solution you'd like I would like the package to include documentation and support for using the “registerLocale” function from the echarts core library. This feature would allow developers to easily modify the language of the charts engine, enabling internationalization and localization of chart data.

Describe alternatives you've considered In web projects it is implemented natively, it should have compatibility on this wrapper.

Additional context Including support for “registerLocale” would greatly enhance the usability of the package for international projects. It would streamline the process of localizing charts, enabling developers to provide a more tailored experience to users in different regions.

Here's the documentation on usage for the official library:

https://echarts.apache.org/en/api.html#echarts.registerLocale

ivantrejo41 avatar Jul 02 '24 13:07 ivantrejo41

  1. registerLocale
  2. defined locale option
echarts.registerLocale('FR', {
  time: {
      month: [
          'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
          'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
      ],
      monthAbbr: [
          'Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin',
          'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'
      ],
      dayOfWeek: [
          'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'
      ],
      dayOfWeekAbbr: [
          'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'
      ]
  },
  legend: {
      selector: {
          all: 'Tout',
          inverse: 'Inverse'
      }
  },
  toolbox: {
      brush: {
          title: {
              rect: 'Sélection rectangulaire',
              polygon: 'Sélection au lasso',
              lineX: 'Sélectionner horizontalement',
              lineY: 'Sélectionner verticalement',
              keep: 'Garder la sélection',
              clear: 'Effacer la sélection'
          }
      },
      dataView: {
          title: 'Visualisation des données',
          lang: ['Visualisation des données', 'Fermer', 'Rafraßchir']
      },
      dataZoom: {
          title: {
              zoom: 'Zoom',
              back: 'Zoom Remise à zéro'
          }
      },
      magicType: {
          title: {
              line: 'Changer pour Ligne',
              bar: 'Changer pour Histogramme',
              stack: 'Superposition',
              tiled: 'Tuile'
          }
      },
      restore: {
          title: 'Restaurer'
      },
      saveAsImage: {
          title: 'Sauvegarder l\'image',
          lang: ['Clic droit pour sauvegarder l\'image']
      }
  },
  series: {
      typeNames: {
          pie: 'Camembert',
          bar: 'Histogramme',
          line: 'Ligne',
          scatter: 'Nuage de points',
          effectScatter: 'Nuage de points stylisé',
          radar: 'Radar',
          tree: 'Arbre',
          treemap: 'Treemap',
          boxplot: 'BoĂźte Ă  moustaches',
          candlestick: 'Chandelier',
          k: 'Linéaire K',
          heatmap: 'Carte de fréquentation',
          map: 'Carte',
          parallel: 'Données parallÚles',
          lines: 'Lignes',
          graph: 'Graphe',
          sankey: 'Sankey',
          funnel: 'Entonnoir',
          gauge: 'Jauge',
          pictorialBar: 'Barres Ă  images',
          themeRiver: 'Stream Graph',
          sunburst: 'Sunburst',
          custom: 'Graphique personnalisé',
          chart: 'Graphique'
      }
  },
  aria: {
      general: {
          withTitle: 'Cette carte est intitulée "{title}"',
          withoutTitle: 'C\'est une carte'
      },
      series: {
          single: {
              prefix: '',
              withName: ' Avec le type de {seriesType} qui s\'appelle {seriesName}.',
              withoutName: ' Avec le type de {seriesType}.'
          },
          multiple: {
              prefix: ' Elle comprend {seriesCount} séries.',
              withName: ' La série {seriesId} représente {seriesName} de {seriesType}.',
              withoutName: ' La série {seriesId} est un/une {seriesType}.',
              separator: {
                  middle: '',
                  end: ''
              }
          }
      },
      data: {
          allData: 'Les données sont: ',
          partialData: 'Les premiers {displayCnt} éléments sont : ',
          withName: 'Les données pour {name} sont {value}',
          withoutName: '{value}',
          separator: {
              middle: ', ',
              end: '. '
          }
      }
  }
});

echarts.init(svgRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
        locale: 'FR',
      });

langObject: https://github.com/apache/echarts/blob/release/src/i18n/langFR.ts

https://echarts.apache.org/en/api.html#echarts.registerLocale

zhiqingchen avatar Jul 03 '24 02:07 zhiqingchen