wuba / react-native-echarts

📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.
https://wuba.github.io/react-native-echarts/
Apache License 2.0
725 stars 26 forks source link

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

Open ivantrejo41 opened 1 month ago

ivantrejo41 commented 1 month ago

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

zhiqingchen commented 1 month ago
  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