+
+"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.
+
+## Storytelling
+
+The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.
+
+#### Bar/Line Racing
+
+Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.
+
+
+
+Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.
+
+
+
+
+For the line chart, there is an intuitive style change that the axis line and axis tick of the y axis (`value` axis) are hidden by default. Look at the following image, the left one is the default style of the line chart in `v4` and the right one is the new style in `v5`. In fact, we already can figure out the values just by the split lines, so we hope to hide unnecessary elements to deliver the chart message in a clearer way.
+
+
+
+For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:
+
+
+
+
+
+#### Label
+
+Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.
+
+Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.
+
+These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.
+
+We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.
+
+The new label feature allows you to have very clear label presentation even in a confined space mobile:
+
+
+
+#### Time Axis
+
+Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.
+
+First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The `formatter` of labels supports templates for time (e.g. `{yyyy}-{MM}-{dd}`), and different `formatter` can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.
+
+The display of the time scale at different dataZoom granularities.
+
+
+
+
+
+#### Tooltip
+
+Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.
+
+
+
+
+In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.
+
+#### Gauge
+
+We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.
+
+Different styles of gauge pointers.
+
+
+
+These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.
+
+
+
+You can see the effect by enable dirty rectangle optimization on the new example page.
+
+##### Line Chart Performance Optimization for Real-Time Time-Series Data
+
+In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.
+
+Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.
+
+## Development Experience
+
+We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.
+
+#### Datasets
+
+ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.
+
+#### Internationalization
+
+The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.
+
+Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the `registerLocale` function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.
+
+```js
+// import the lang object and set when init
+echarts.registerLocale('DE', lang);
+echarts.init(DomElement, null, {
+ locale: 'DE'
+});
+```
+
+#### TypeScript Refactoring
+
+In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.
+
+For developers, we can also generate better and more code-compliant `DTS` type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts), which is a lot of work, so thanks for your contribution.
+
+In addition, if a developer's component is introduced on-demand, we provide a `ComposeOption` type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.
+
+## Accessibility
+
+Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.
+
+In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.
+
+#### Theme Colors
+
+We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.
+
+Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.
+
+#### Decal Patterns
+
+ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.
+
+
+
+
+2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart.
+
+3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series.
+
+4. We suggest putting larger values on the top side of the chart, you will get a better display effect.
diff --git a/contents/es/best-practices/specification/pie/basic-pie.md b/contents/es/best-practices/specification/pie/basic-pie.md
new file mode 100644
index 000000000..be70e6cbc
--- /dev/null
+++ b/contents/es/best-practices/specification/pie/basic-pie.md
@@ -0,0 +1,47 @@
+# Pie Chart
+
+The pie chart is mainly used to display the proportion of different categories compared with the total. The arc length of each sector in the figure means the proportion of the category. The sum of all categories is 100%.
+
+
+
+Even the pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding.
+
+## Suggestion for Using Pie Chart
+
+1. The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%.
+
+2. It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as "other". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative.
+
+
+
+
+` y usar CSS para cambiar el ancho y la altura. Al inicializar, se importa el gráfico en el nodo. Si no se declaran `opts.width` ni `opts.height`, el tamaño del gráfico será el tamaño del nodo por defecto.
+
+```html
+
+
+```
+
+Es importante destacar que antes de llamar a `echarts.init`, debes asegurarte de que el contenedor ya tenga un ancho y una altura definidos..
+
+### Especificar el tamaño del gráfico
+
+Si el contenedor no tiene un ancho y alto definidos, o deseas que el tamaño del gráfico no sea igual al del contenedor, puedes inicializar el tamaño desde el principio.
+
+```html
+
+
+```
+
+## Reacción al tamaño del contenedor
+
+### Escuchar el tamaño del contenedor para cambiar el tamaño del gráfico
+
+En algunos casos, queremos cambiar el tamaño del gráfico en función de cómo cambie el tamaño del contenedor.
+
+Por ejemplo, el contenedor tiene una altura de 400px y un ancho del 100% del ancho de la página. Si deseas cambiar el ancho de la página mientras mantienes el ancho del gráfico como el 100% de este, puedes usar el siguiente método.
+
+Puedes escuchar el evento `resize` para detectar cuando el navegador cambia de tamaño. Luego, utiliza [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) para redimensionar el gráfico.
+
+```html
+
+
+
+```
+
+> Consejos：A veces podemos ajustar el tamaño del contenedor mediante JS/CSS, pero esto no cambia el tamaño de la página, por lo que no se disparará el evento `resize` En ese caso, puedes intentar usar la API [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) para cubrir este escenario.
+
+### Establecer un tamaño específico para el gráfico
+
+Aparte de llamar a `resize()` sin parámetros, puedes establecer explícitamente el ancho y la altura para tener un tamaño de gráfico diferente al tamaño del contenedor.
+
+```js
+myChart.resize({
+ width: 800,
+ height: 400
+});
+```
+
+> Consejos: Presta atención a cómo está definida la API al leer la documentación. La API `resize()` a veces se confunde con la forma `myCharts.resize(800, 400)` la cual no existe.
+
+### Eliminar y reconstruir el nodo del contenedor
+
+Supongamos que existen varias páginas de marcadores y cada página contiene algunos gráficos. En este caso, el contenido de otras páginas se eliminará del DOM cuando se seleccione una página. El usuario no podrá ver el gráfico después de reabrir esas páginas.
+
+Esto se debe a que el nodo del contenedor del gráfico ha sido eliminado. Aunque el nodo se añada nuevamente después, el nodo en el que estaba el gráfico ya no existe.
+
+La forma correcta es llamar a [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) para eliminar la instancia después de que se haya eliminado el contenedor, y luego llamar a [echarts.init](${mainSitePath}/api.html#echarts.init) para inicializar el gráfico nuevamente después de que el contenedor haya sido añadido otra vez.
+
+> Consejos: Llama a [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) para liberar los recursos al eliminar el nodo y evitar posibles fugas de memoria.
diff --git a/contents/es/concepts/coordinate.md b/contents/es/concepts/coordinate.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/data-transform.md b/contents/es/concepts/data-transform.md
new file mode 100644
index 000000000..16ebdbd59
--- /dev/null
+++ b/contents/es/concepts/data-transform.md
@@ -0,0 +1,660 @@
+# Transformación de Datos
+
+La `Data transform` ha sido soportada desde Apache ECharts TM 5. En ECharts, el término `data transform` significa generar nuevos datos a partir de los datos de origen proporcionados por el usuario y las funciones de transformación. Esta característica permite a los usuarios procesar los datos de manera declarativa y proporciona algunas "funciones de transformación" comunes para realizar tareas de este tipo de manera sencilla. (Para mantener la consistencia en el contexto, seguimos usando el sustantivo "transformación" en lugar de "transformación de datos").
+
+La fórmula abstracta de la transformación de datos es: `outData = f(inputData)`, donde la función de transformación f puede ser como `f` puede ser como`filter`, `sort`, `regression`, `boxplot`, `cluster`, `aggregate`(entre otras) ...
+Con la ayuda de estos métodos de transformación, los usuarios pueden implementar características como:
+
+- Partition data into multiple series.
+- Make some statistics and visualize the result.
+- Adapt some visualization algorithms to data and display the result.
+- Sort data.
+- Remove or choose some kind of empty or special datums.
+- ...
+
+## Comenzando con la Transformación de Datos
+
+En ECharts, la transformación de datos se implementa con base en el concepto de [dataset](~${optionPath}#dataset). Un [dataset.transform](${optionPath}#dataset.transform) se puede configurar en una instancia de dataset para indicar que este dataset se generará a partir de esta `transform`. Por ejemplo:
+
+```js live
+var option = {
+ dataset: [
+ {
+ // This dataset is on `datasetIndex: 0`.
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Cereal', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Dumpling', 341, 25, 2011],
+ ['Biscuit', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Cereal', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Dumpling', 241, 27, 2012],
+ ['Biscuit', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Cereal', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Dumpling', 281, 31, 2013],
+ ['Biscuit', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Cereal', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Dumpling', 211, 35, 2014],
+ ['Biscuit', 72, 24, 2014]
+ ]
+ // id: 'a'
+ },
+ {
+ // This dataset is on `datasetIndex: 1`.
+ // A `transform` is configured to indicate that the
+ // final data of this dataset is transformed via this
+ // transform function.
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2011 }
+ }
+ // There can be optional properties `fromDatasetIndex` or `fromDatasetId`
+ // to indicate that where is the input data of the transform from.
+ // For example, `fromDatasetIndex: 0` specify the input data is from
+ // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the
+ // input data is from the dataset having `id: 'a'`.
+ // [DEFAULT_RULE]
+ // If both `fromDatasetIndex` and `fromDatasetId` are omitted,
+ // `fromDatasetIndex: 0` are used by default.
+ },
+ {
+ // This dataset is on `datasetIndex: 2`.
+ // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is
+ // specified, `fromDatasetIndex: 0` is used by default
+ transform: {
+ // The "filter" transform filters and gets data items only match
+ // the given condition in property `config`.
+ type: 'filter',
+ // Transforms has a property `config`. In this "filter" transform,
+ // the `config` specify the condition that each result data item
+ // should be satisfied. In this case, this transform get all of
+ // the data items that the value on dimension "Year" equals to 2012.
+ config: { dimension: 'Year', value: 2012 }
+ }
+ },
+ {
+ // This dataset is on `datasetIndex: 3`
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2013 }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['25%', '50%'],
+ // In this case, each "pie" series reference to a dataset that has
+ // the result of its "filter" transform.
+ datasetIndex: 1
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['50%', '50%'],
+ datasetIndex: 2
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['75%', '50%'],
+ datasetIndex: 3
+ }
+ ]
+};
+```
+
+Vamos a resumir los puntos clave del uso de la transformación de datos::
+
+- Generar nuevos datos a partir de los datos declarados existentes mediante la declaración de `transform`, `fromDatasetIndex`/`fromDatasetId` en algún conjunto de datos en blanco.
+- Las series hacen referencia a estos conjuntos de datos para mostrar el resultado..
+
+## Uso Avanzado
+
+#### Transformación Encadenada
+
+Existe una forma sintáctica simplificada para encadenar transformaciones, como:
+
+```js
+option = {
+ dataset: [
+ {
+ source: [] // The original data
+ },
+ {
+ // Declare transforms in an array to pipe multiple transforms,
+ // which makes them execute one by one and take the output of
+ // the previous transform as the input of the next transform.
+ transform: [
+ {
+ type: 'filter',
+ config: { dimension: 'Product', value: 'Tofu' }
+ },
+ {
+ type: 'sort',
+ config: { dimension: 'Year', order: 'desc' }
+ }
+ ]
+ }
+ ],
+ series: {
+ type: 'pie',
+ // Display the result of the piped transform.
+ datasetIndex: 1
+ }
+};
+```
+
+> Nota: teóricamente, cualquier tipo de transformación puede tener múltiples datos de entrada y múltiples datos de salida. Pero cuando una transformación se encadena, solo puede tomar una entrada (excepto si es la primera transformación del encadenamiento) y producir una salida (excepto si es la última transformación del encadenamiento).
+
+#### Salida de Múltiples Datos
+
+En la mayoría de los casos, las funciones de transformación solo necesitan producir un dato. Pero en realidad, existen escenarios en los que una función de transformación necesita producir múltiples datos, cada uno de los cuales puede ser utilizado por diferentes series.
+
+Por ejemplo, en la transformación incorporada de boxplot, además de los datos del boxplot producidos, también se generan los datos de los valores atípicos, los cuales pueden ser utilizados en una serie de dispersión. Ver el [example](${exampleEditorPath}boxplot-light-velocity).
+
+Usamos la propiedad [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) para satisfacer este requerimiento. Por ejemplo:
+
+```js
+option = {
+ dataset: [
+ {
+ // Original source data.
+ source: []
+ },
+ {
+ transform: {
+ type: 'boxplot'
+ }
+ // After this "boxplot transform" two result data generated:
+ // result[0]: The boxplot data
+ // result[1]: The outlier data
+ // By default, when series or other dataset reference this dataset,
+ // only result[0] can be visited.
+ // If we need to visit result[1], we have to use another dataset
+ // as follows:
+ },
+ {
+ // This extra dataset references the dataset above, and retrieves
+ // the result[1] as its own data. Thus series or other dataset can
+ // reference this dataset to get the data from result[1].
+ fromDatasetIndex: 1,
+ fromTransformResult: 1
+ }
+ ],
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: [
+ {
+ name: 'boxplot',
+ type: 'boxplot',
+ // Reference the data from result[0].
+ datasetIndex: 1
+ },
+ {
+ name: 'outlier',
+ type: 'scatter',
+ // Reference the data from result[1].
+ datasetIndex: 2
+ }
+ ]
+};
+```
+
+Además, [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) y [dataset.transform](${optionPath}#dataset.transform) pueden aparecer en un mismo conjunto de datos, lo que significa que la entrada de la transformación proviene del resultado obtenido upstream especificado por `fromTransformResult`. Por ejemplo:
+
+```js
+{
+ fromDatasetIndex: 1,
+ fromTransformResult: 1,
+ transform: {
+ type: 'sort',
+ config: { dimension: 2, order: 'desc' }
+ }
+}
+```
+
+#### Depuración en el Entorno de Desarrollo
+
+Al usar la transformación de datos, podríamos encontrarnos con el problema de que el gráfico final no se muestra correctamente, pero no sabemos dónde está el error en la configuración. En este caso, una propiedad llamada `transform.print` puede ser útil. (`transform.print` solo está disponible en el entorno de desarrollo).
+
+```js
+option = {
+ dataset: [
+ {
+ source: []
+ },
+ {
+ transform: {
+ type: 'filter',
+ config: {},
+ // The result of this transform will be printed
+ // in dev tool via `console.log`.
+ print: true
+ }
+ }
+ ]
+};
+```
+
+## Transformación de Filtro
+
+El tipo de transformación "filtro" es una transformación incorporada que proporciona un filtro de datos según las condiciones especificadas. La opción básica es la siguiente: Este es otro ejemplo de transformación de filtro:
+
+```js live
+option = {
+ dataset: [
+ {
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Latte', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Milk Tee', 341, 25, 2011],
+ ['Porridge', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Latte', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Milk Tee', 241, 27, 2012],
+ ['Porridge', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Latte', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Milk Tee', 281, 31, 2013],
+ ['Porridge', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Latte', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Milk Tee', 211, 35, 2014],
+ ['Porridge', 72, 24, 2014]
+ ]
+ },
+ {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', '=': 2011 }
+ // The config is the "condition" of this filter.
+ // This transform traverse the source data and
+ // and retrieve all the items that the "Year"
+ // is `2011`.
+ }
+ }
+ ],
+ series: {
+ type: 'pie',
+ datasetIndex: 1
+ }
+};
+```
+
+Este es otro ejemplo de transformación de filtro:
+
+
{b} : {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: [ + 'Direct Access', + 'Email Marketing', + 'Affiliate Ads', + 'Video Ads', + 'Search Engines' + ] + }, + series: [ + { + name: 'Access Source', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { value: 335, name: 'Direct Access' }, + { value: 310, name: 'Email Marketing' }, + { value: 234, name: 'Affiliate Ads' }, + { value: 135, name: 'Video Ads' }, + { value: 1548, name: 'Search Engines' } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] +}; + +let currentIndex = -1; + +setInterval(function() { + var dataLen = option.series[0].data.length; + myChart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: currentIndex + }); + currentIndex = (currentIndex + 1) % dataLen; + myChart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }); + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: currentIndex + }); +}, 1000); +``` + +## Escuchar Eventos en el Área Vacía + +A veces los desarrolladores necesitan escuchar los eventos que se disparan desde el área vacía del lienzo. Por ejemplo, es necesario restablecer el gráfico cuando los usuarios hacen clic en el área vacía. + +Antes de hablar sobre esta función, necesitamos aclarar dos tipos de eventos: eventos zrender y eventos echarts. + +```js +myChart.getZr().on('click', function(event) { + // This listener is listening to a `zrender event`. +}); +myChart.on('click', function(event) { + // This listener is listening to a `echarts event`. +}); +``` + +Los eventos de zrender son diferentes de los eventos de echarts. Los primeros se activan cuando el ratón/puntero está en cualquier lugar, mientras que los segundos solo se activan cuando el ratón/puntero está sobre los elementos gráficos. De hecho, los eventos de echarts se implementan basándose en los eventos de zrender, es decir, cuando un evento de zrender se activa sobre un elemento gráfico, echarts activará un evento de echarts. + +Teniendo en cuenta los eventos de zrender, podemos implementar la escucha de eventos desde el área en blanco de la siguiente manera: + +```js +myChart.getZr().on('click', function(event) { + // No "target" means that mouse/pointer is not on + // any of the graphic elements, which is "blank". + if (!event.target) { + // Click on blank. Do something. + } +}); +``` diff --git a/contents/es/concepts/legend.md b/contents/es/concepts/legend.md new file mode 100644 index 000000000..34a643c0f --- /dev/null +++ b/contents/es/concepts/legend.md @@ -0,0 +1,143 @@ +# Leyenda + +Las leyendas se utilizan para anotar el contenido del gráfico utilizando diferentes colores, formas y textos para indicar distintas categorías. Al hacer clic en las leyendas, el usuario puede mostrar u ocultar las categorías correspondientes. La leyenda es clave para entender el gráfico. + +## Diseño + +La leyenda siempre se coloca en la esquina superior derecha del gráfico. Todas las leyendas en la misma página deben ser consistentes, alineándose horizontal o verticalmente según el diseño general del espacio del gráfico. Cuando el gráfico tiene poco espacio vertical o el área de contenido está congestionada, también es una buena opción colocar la leyenda en la parte inferior del gráfico. A continuación se muestran algunos diseños de leyenda: + +```js live +option = { + legend: { + // Try 'horizontal' + orient: 'vertical', + right: 10, + top: 'center' + }, + dataset: { + source: [ + ['product', '2015', '2016', '2017'], + ['Matcha Latte', 43.3, 85.8, 93.7], + ['Milk Tea', 83.1, 73.4, 55.1], + ['Cheese Cocoa', 86.4, 65.2, 82.5], + ['Walnut Brownie', 72.4, 53.9, 39.1] + ] + }, + xAxis: { type: 'category' }, + yAxis: {}, + series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] +}; +``` +Usa un control desplazable si hay muchas leyendas. + + +```js +option = { + legend: { + type: 'scroll', + orient: 'vertical', + right: 10, + top: 20, + bottom: 20, + data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x'] + // ... + } + // ... +}; +``` + +## Estilo + +Para fondos de color oscuro, utiliza un color claro para la capa de fondo y el texto mientras cambias el fondo a translúcido. + +```js +option = { + legend: { + data: ['Legend A', 'Legend B', 'Legend C'], + backgroundColor: '#ccc', + textStyle: { + color: '#ccc' + // ... + } + // ... + } + // ... +}; +``` + +El color de la leyenda tiene muchas formas de diseñarse. Para diferentes gráficos, el estilo de la leyenda puede ser distinto. + +
+
+```js
+option = {
+ legend: {
+ data: ['Legend A', 'Legend B', 'Legend C'],
+ icon: 'rect'
+ // ...
+ }
+ // ...
+};
+```
+
+## Interactivo
+
+Dependiendo de la demanda ambiental, la leyenda puede soportar operaciones interactivas. Haz clic en la leyenda para mostrar u ocultar las categorías correspondientes:
+
+```js
+option = {
+ legend: {
+ data: ['Legend A', 'Legend B', 'Legend C'],
+ selected: {
+ 'Legend A': true,
+ 'Legend B': true,
+ 'Legend C': false
+ }
+ // ...
+ }
+ // ...
+};
+```
+
+## Consejos
+
+La leyenda debe utilizarse según la situación. Algunos gráficos de doble eje incluyen varios tipos de gráficos. Los diferentes tipos de leyenda deben distinguirse.
+
+```js
+option = {
+ legend: {
+ data: [
+ {
+ name: 'Legend A',
+ icon: 'rect'
+ },
+ {
+ name: 'Legend B',
+ icon: 'circle'
+ },
+ {
+ name: 'Legend C',
+ icon: 'pin'
+ }
+ ]
+ // ...
+ },
+ series: [
+ {
+ name: 'Legend A'
+ // ...
+ },
+ {
+ name: 'Legend B'
+ // ...
+ },
+ {
+ name: 'Legend C'
+ // ...
+ }
+ ]
+ // ...
+};
+```
+
+Cuando hay solo un tipo de dato en el gráfico, usa el título del gráfico en lugar de la leyenda para explicarlo.
diff --git a/contents/es/concepts/options.md b/contents/es/concepts/options.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/series.md b/contents/es/concepts/series.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/style.md b/contents/es/concepts/style.md
new file mode 100644
index 000000000..cc6ad0c3f
--- /dev/null
+++ b/contents/es/concepts/style.md
@@ -0,0 +1,356 @@
+# Resumen de la Personalización de Estilos
+
+Este artículo ofrece un resumen de los diferentes enfoques sobre la personalización de estilos en Apache EChartsTM. Por ejemplo, cómo configurar el color, tamaño, sombra de los elementos gráficos y etiquetas.
+
+> El término "estilo" puede no seguir la convención de la visualización de datos, pero lo usamos en este artículo porque es popular y fácil de entender.
+
+A continuación, se presentarán los enfoques. Las funcionalidades de estos pueden solaparse, pero son adecuados para diferentes escenarios.
+
+- Tema
+- Paleta de Colores
+- Personalizar estilo explícitamente (itemStyle, lineStyle, areaStyle, label, ...)
+- Codificación visual (visualMap component)
+
+## Tema
+
+Establecer un tema es la forma más sencilla de cambiar el estilo de color. Por ejemplo, en la [Examples page](${mainSitePath}examples),podemos cambiar a modo oscuro y ver el resultado de un tema diferente.
+
+En nuestro proyecto, podemos cambiar a un tema oscuro de la siguiente manera:
+
+```js
+var chart = echarts.init(dom, 'dark');
+```
+
+Otros temas no están incluidos por defecto, y necesitamos cargarlos nosotros mismos si queremos utilizarlos. Los temas pueden ser visitados y descargados en el [theme builder](${mainSitePath}theme-builder.html). En él, también se pueden crear o editar temas. El tema descargado se puede usar de la siguiente manera:
+
+Si un tema se descarga como un archivo JSON, debemos registrarlo nosotros mismos, por ejemplo:
+
+```js
+// Assume the theme name is "vintage".
+fetch('theme/vintage.json')
+ .then(r => r.json())
+ .then(theme => {
+ echarts.registerTheme('vintage', theme);
+ var chart = echarts.init(dom, 'vintage');
+ })
+```
+
+If a theme is downloaded as a JS file, it will auto register itself:
+
+```js
+// Import the `vintage.js` file in HTML, then:
+var chart = echarts.init(dom, 'vintage');
+// ...
+```
+
+## Paleta de Colores
+
+La paleta de colores puede proporcionarse en la opción. Estas proporcionan un grupo de colores, que serán seleccionados automáticamente por las series y los datos. Podemos dar una paleta global, o una paleta exclusiva para ciertas series.
+
+```js
+option = {
+ // Global palette:
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ],
+
+ series: [
+ {
+ type: 'bar',
+ // A palette only work for the series:
+ color: [
+ '#dd6b66',
+ '#759aa0',
+ '#e69d87',
+ '#8dc1a9',
+ '#ea7e53',
+ '#eedd78',
+ '#73a373',
+ '#73b9bc',
+ '#7289ab',
+ '#91ca8c',
+ '#f49f42'
+ ]
+ // ...
+ },
+ {
+ type: 'pie',
+ // A palette only work for the series:
+ color: [
+ '#37A2DA',
+ '#32C5E9',
+ '#67E0E3',
+ '#9FE6B8',
+ '#FFDB5C',
+ '#ff9f7f',
+ '#fb7293',
+ '#E062AE',
+ '#E690D1',
+ '#e7bcf3',
+ '#9d96f5',
+ '#8378EA',
+ '#96BFFF'
+ ]
+ // ...
+ }
+ ]
+};
+```
+
+## Personalizar Estilo de Forma Explícita
+
+Es una forma común de establecer estilos de manera explícita. A lo largo de la [option](${optionPath}), de ECharts, se pueden configurar opciones relacionadas con el estilo en varios lugares, incluyendo [itemStyle](${optionPath}series.itemStyle), [lineStyle](${optionPath}series-line.lineStyle), [areaStyle](${optionPath}series-line.areaStyle), [label](${optionPath}series.label), etc.
+
+En términos generales, todos los componentes y series incorporados siguen la convención de nombres como `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, aunque pueden aparecer en diferentes lugares según la serie o componente.
+
+En el siguiente código, añadimos sombra y degradado a un gráfico de burbujas.
+
+```js live
+var data = [
+ [
+ [28604, 77, 17096869, 'Australia', 1990],
+ [31163, 77.4, 27662440, 'Canada', 1990],
+ [1516, 68, 1154605773, 'China', 1990],
+ [13670, 74.7, 10582082, 'Cuba', 1990],
+ [28599, 75, 4986705, 'Finland', 1990],
+ [29476, 77.1, 56943299, 'France', 1990],
+ [31476, 75.4, 78958237, 'Germany', 1990],
+ [28666, 78.1, 254830, 'Iceland', 1990],
+ [1777, 57.7, 870601776, 'India', 1990],
+ [29550, 79.1, 122249285, 'Japan', 1990],
+ [2076, 67.9, 20194354, 'North Korea', 1990],
+ [12087, 72, 42972254, 'South Korea', 1990],
+ [24021, 75.4, 3397534, 'New Zealand', 1990],
+ [43296, 76.8, 4240375, 'Norway', 1990],
+ [10088, 70.8, 38195258, 'Poland', 1990],
+ [19349, 69.6, 147568552, 'Russia', 1990],
+ [10670, 67.3, 53994605, 'Turkey', 1990],
+ [26424, 75.7, 57110117, 'United Kingdom', 1990],
+ [37062, 75.4, 252847810, 'United States', 1990]
+ ],
+ [
+ [44056, 81.8, 23968973, 'Australia', 2015],
+ [43294, 81.7, 35939927, 'Canada', 2015],
+ [13334, 76.9, 1376048943, 'China', 2015],
+ [21291, 78.5, 11389562, 'Cuba', 2015],
+ [38923, 80.8, 5503457, 'Finland', 2015],
+ [37599, 81.9, 64395345, 'France', 2015],
+ [44053, 81.1, 80688545, 'Germany', 2015],
+ [42182, 82.8, 329425, 'Iceland', 2015],
+ [5903, 66.8, 1311050527, 'India', 2015],
+ [36162, 83.5, 126573481, 'Japan', 2015],
+ [1390, 71.4, 25155317, 'North Korea', 2015],
+ [34644, 80.7, 50293439, 'South Korea', 2015],
+ [34186, 80.6, 4528526, 'New Zealand', 2015],
+ [64304, 81.6, 5210967, 'Norway', 2015],
+ [24787, 77.3, 38611794, 'Poland', 2015],
+ [23038, 73.13, 143456918, 'Russia', 2015],
+ [19360, 76.5, 78665830, 'Turkey', 2015],
+ [38225, 81.4, 64715810, 'United Kingdom', 2015],
+ [53354, 79.1, 321773631, 'United States', 2015]
+ ]
+];
+
+option = {
+ backgroundColor: {
+ type: 'radial',
+ x: 0.3,
+ y: 0.3,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#f7f8fa'
+ },
+ {
+ offset: 1,
+ color: '#cdd0d5'
+ }
+ ]
+ },
+ grid: {
+ left: 10,
+ containLabel: true,
+ bottom: 10,
+ top: 10,
+ right: 30
+ },
+ xAxis: {
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: false
+ },
+ scale: true
+ },
+ series: [
+ {
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(120, 36, 50, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(251, 118, 123)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(204, 46, 72)'
+ }
+ ]
+ }
+ }
+ },
+ {
+ name: '2015',
+ data: data[1],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(25, 100, 150, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(129, 227, 238)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(25, 183, 207)'
+ }
+ ]
+ }
+ }
+ }
+ ]
+};
+```
+
+## Estado de Estilo de Énfasis
+
+Cuando el mouse pasa por encima de un elemento gráfico, generalmente se mostrará el estilo de énfasis. Por defecto, el estilo de énfasis se genera automáticamente a partir del estilo normal. Sin embargo, se puede especificar mediante la propiedad [emphasis](${optionPath}series-bar.emphasis) Las opciones en [emphasis](${optionPath}series-bar.emphasis) son las mismas que las del estado normal, por ejemplo:
+
+```js
+option = {
+ series: {
+ type: 'scatter',
+
+ // Styles for normal state.
+ itemStyle: {
+ // Color of the point.
+ color: 'red'
+ },
+ label: {
+ show: true,
+ // Text of labels.
+ formatter: 'This is a normal label.'
+ },
+
+ // Styles for emphasis state.
+ emphasis: {
+ itemStyle: {
+ // Color in emphasis state.
+ color: 'blue'
+ },
+ label: {
+ show: true,
+ // Text in emphasis.
+ formatter: 'This is a emphasis label.'
+ }
+ }
+ }
+};
+```
+
+Nota: Antes de ECharts4, el estilo de énfasis debía escribirse de la siguiente manera:
+
+```js
+option = {
+ series: {
+ type: 'scatter',
+
+ itemStyle: {
+ // Styles for normal state.
+ normal: {
+ color: 'red'
+ },
+ // Styles for emphasis state.
+ emphasis: {
+ color: 'blue'
+ }
+ },
+
+ label: {
+ // Styles for normal state.
+ normal: {
+ show: true,
+ formatter: 'This is a normal label.'
+ },
+ // Styles for emphasis state.
+ emphasis: {
+ show: true,
+ formatter: 'This is a emphasis label.'
+ }
+ }
+ }
+};
+```
+
+El formato de opción sigue siendo **compatible**, pero no se recomienda. De hecho, en la mayoría de los casos, los usuarios solo configuran el estilo normal y utilizan el estilo de énfasis predeterminado. Por lo tanto, desde ECharts4, se admite escribir el estilo sin el término "normal", lo que hace que la opción sea más simple y ordenada.
+
+## Codificación Visual mediante el Componente visualMap
+
+El [visualMap component](${optionPath}visualMap) permite configurar la regla que mapea un valor a un canal visual (color, tamaño, ...). Puedes encontrar más detalles en [Visual Map of Data](${lang}/concepts/visual-map/).
diff --git a/contents/es/concepts/tooltip.md b/contents/es/concepts/tooltip.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/visual-map.md b/contents/es/concepts/visual-map.md
new file mode 100644
index 000000000..888326fe7
--- /dev/null
+++ b/contents/es/concepts/visual-map.md
@@ -0,0 +1,137 @@
+# Mapa Visual de Datos
+
+La visualización de datos es un proceso de mapeo de datos en elementos visuales. Este procedimiento también puede llamarse codificación visual, y los elementos visuales también pueden llamarse canales visuales.
+
+Cada tipo de gráfico en Apache EChartsTM tiene este procedimiento de mapeo incorporado. Por ejemplo, el gráfico de líneas mapea los datos en líneas, el gráfico de barras mapea los datos en altura. Algunos gráficos más complicados, como `graph`, `themeRiver`, y `treemap` , tienen su propio mapeo incorporado.
+
+Además, ECharts proporciona el [visualMap component](${optionPath}visualMap) para mapeo visual general. Los elementos visuales permitidos en el componente `visualMap` son:
+
+- `symbol`, `symbolSize`
+- `color`, `opacity`, `colorAlpha`,
+- `colorLightness`, `colorSaturation`, `colorHue`
+
+A continuación, vamos a presentar cómo usar el componente `visualMap`.
+
+## Datos y Dimensiones
+
+Los datos suelen almacenarse en [series.data](${optionPath}series.data) en ECharts. Dependiendo del tipo de gráfico, como lista, árbol, gráfico, etc., la forma de los datos puede variar. Pero tienen una característica común: son una colección de elementos de datos. Cada elemento de datos contiene un valor de datos y otra información si es necesario. Cada valor de datos puede ser un valor único (una dimensión) o un arreglo (varias dimensiones).
+
+Por ejemplo, [series.data](${optionPath}series.data) es la forma más común, que es una `list`, un arreglo común:
+
+```js
+series: {
+ data: [
+ {
+ // every item here is a dataItem
+ value: 2323, // this is data value
+ itemStyle: {}
+ },
+ 1212, // it can also be a value of dataItem, which is a more common case
+ 2323, // every data value here is one dimension
+ 4343,
+ 3434
+ ];
+}
+```
+
+```js
+series: {
+ data: [
+ {
+ // every item here is a dataItem
+ value: [3434, 129, 'San Marino'], // this is data value
+ itemStyle: {}
+ },
+ [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
+ [2323, 3223, 'Nauru'], // every data value here is three dimension
+ [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
+ // the second dimension to y axis,
+ // and the third dimension to symbolSize
+ ];
+}
+```
+
+Normalmente, las primeras una o dos dimensiones se utilizan para el mapeo. Por ejemplo, mapear la primera dimensión al eje x, y la segunda dimensión al eje y. Si deseas representar más dimensiones,`visualMap` es lo que necesitas. Es probable que los [scatter charts](${optionPath}series-scatter) usen el radio para representar la tercera dimensión.
+
+## El Componente visualMap
+
+El componente visualMap define el mapeo de qué dimensión de los datos a qué elementos visuales.
+
+
+Los siguientes dos tipos de componentes visualMap están soportados, identificados con[visualMap.type](${optionPath}visualMap.type).
+
+Su estructura se define de la siguiente manera:
+
+```js
+option = {
+ visualMap: [
+ // can define multiple visualMap components at the same time
+ {
+ // the first visualMap component
+ type: 'continuous' // defined as continuous visualMap
+ // ...
+ },
+ {
+ // the second visualMap component
+ type: 'piecewise' // defined as discrete visualMap
+ // ...
+ }
+ ]
+ // ...
+};
+```
+
+## Componentes de Mapeo Visual Continuo y Discreto
+
+El componente de mapeo visual de ECharts se divide en continuo
+([visualMapContinuous](${optionPath}visualMap-continuous)) y discreto ([visualMapPiecewise](${optionPath}visualMap-piecewise)).
+
+Continuo significa que la dimensión de los datos para el mapeo visual es un valor continuo, mientras que discreto significa que los datos se dividen en múltiples segmentos o datos discretos.
+
+### Mapeo Visual Continuo
+
+El mapeo visual de tipo continuo puede determinar el rango del mapeo visual especificando los valores máximos y mínimos.
+
+```js
+option = {
+ visualMap: [
+ {
+ type: 'continuous',
+ min: 0,
+ max: 5000,
+ dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped
+ seriesIndex: 4, // The fourth series is mapped.
+ inRange: {
+ // The visual configuration in the selected range
+ color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping
+ // the minimum value of the data is mapped to 'blue', and
+ // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.
+ // The rest is automatically calculated linearly.
+ symbolSize: [30, 100] // Defines the mapping range for the graphic size.
+ // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.
+ // The maximum value is mapped to 100.
+ // The rest is calculated linearly automatically.
+ },
+ outOfRange: {
+ // Check the out of range visual configuration
+ symbolSize: [30, 100]
+ }
+ }
+ // ...
+ ]
+};
+```
+
+donde [visualMap.inRange](${optionPath}visualMap.inRange) indica el estilo utilizado para los datos dentro del rango de mapeo de datos; mientras que [visualMap.outOfRange](${optionPath}visualMap.outOfRange) especifica el estilo para los datos fuera del rango de mapeo.
+
+[visualMap.dimension](~visualMap.dimension) especifica qué dimensión de los datos será mapeada visualmente.
+
+### Mapeo Visual por Segmentos
+
+El componente de mapeo visual por segmentos tiene tres modos.
+
+- Segmentación promedio de datos continuos: basada en [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) para dividir automáticamente los datos en partes iguales.
+- Segmentación personalizada de datos continuos: define el rango de cada parte basado en [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces).
+- Datos discretos (datos categóricos): las categorías se definen en [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories).
+
+Para utilizar un mapa visual segmentado, debes configurar `type` a `'piecewise'` y elegir uno de los tres elementos de configuración mencionados.
diff --git a/contents/es/get-started.md b/contents/es/get-started.md
new file mode 100644
index 000000000..67f1e265b
--- /dev/null
+++ b/contents/es/get-started.md
@@ -0,0 +1,91 @@
+# Empezando
+
+## Obtener Apache Echarts
+
+Apache Echarts soporta varios metodos de descarga, los cuales se explican
+con mas detalles en el siguiente tutorial [Installation](${lang}/basics/download).
+Aqui, tomamos el ejemplo de obtenerlo desde el CDN desde [jsDelivr](https://www.jsdelivr.com/package/npm/echarts)
+y explicamos como instalarlo rapidamente.
+
+En [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) selecciona `dist/echarts.js`, haz click y guarda el archivo como `echarts.js` file.
+
+> Mas Informacion sobre estos archivos se puede encontrar en el siguiente tutorial [Installation](${lang}/basics/download).
+
+## Incluir Echarts
+
+Crea un nuevo archivo `index.html` en el directorio donde guardaste el archivo `echarts.js`, con el siguiente contenido:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+Cuando abras este `index.html`, veras una pagina vacia. pero no te preocupes. Abre la consoloa y asegurate de que no se reporte ningun, mensaje de error, luego puedes proceder al siguiente paso.
+
+## Dibuja un grafico Simple
+
+Antes de Dibujar, necesitamos preparar un contenedor DOM para Echarts con una altura y un ancho definidos. Agregar el siguiente codigo despues de la etiqueta que introdujiste anteriormente.
+
+```html
+
+
+
+
+```
+
+Luego, puedes inicializar una instancia de Echarts con el metodo [echarts.init](${mainSitePath}api.html#echarts.init) y establecer la instancia de Echarts con el Metodo [setOption](${mainSitePath}api.html#echartsInstance.setOption) para generar un grafico de barras simple. Aqui tienes el codigo completo.
+
+```html
+
+
+
+
+ ECharts
+
+
+
+
+
+
+
+
+
+```
+
+Y ahi esta tu primer grafico con Apache ECharts!
+
+
Vector SVG images are not blurred;
Support for initial animation | +| Server-Side Canvas Rendering | Image | The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG | + +En general, se debe preferir la solución de renderizado SVG del lado del servidor, o si SVG no es aplicable, se puede considerar la solución de renderizado en Canvas. + +El renderizado del lado del servidor también tiene algunas limitaciones, especialmente en lo que respecta a interacciones que no pueden ser soportadas. Por lo tanto, si tienes requisitos de interacción, puedes consultar la sección "Renderizado del lado del servidor con hidratación" a continuación. + +## Renderizado del lado del servidor + + +### Renderizado del lado del servidor en SVG + +> Actualización de versión: + +> +> - 5.3.0: Introducción de una nueva solución de renderizado basada en cadenas SVG sin dependencias y soporte para animaciones iniciales. +> - 5.5.0: Se añadió un entorno de ejecución ligero en el cliente, que permite algunas interacciones sin necesidad de cargar el ECharts completo en el cliente. + +Introdujimos una nueva solución de renderizado del lado del servidor basada en cadenas SVG sin dependencias en la versión 5.3.0. + +```ts +// Server-side code +const echarts = require('echarts'); + +// In SSR mode the first container parameter is not required +let chart = echarts.init(null, null, { + renderer: 'svg', // must use SVG rendering mode + ssr: true, // enable SSR + width: 400, // need to specify height and width + height: 300 +}); + +// use setOption as normal +chart.setOption({ + //... +}); + +// Output a string +const svgStr = chart.renderToSVGString(); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; +``` + +La estructura general del código es casi la misma que en el navegador, comenzando con `init` para inicializar un gráfico de ejemplo y luego configurando los elementos del gráfico mediante `setOption`. Sin embargo, los parámetros pasados a `init` serán diferentes a los utilizados en el navegador. + +- En primer lugar, dado que el SVG renderizado en el lado del servidor es basado en cadenas, no necesitamos un contenedor para mostrar el contenido renderizado, por lo que podemos pasar `null` o `undefined` como primer `container` parametro de `init`. +- Luego, en el tercer parámetro de `init` debemos indicarle a ECharts que habilite el modo de renderizado del lado del servidor especificando `ssr: true`.De esta manera, ECharts sabrá que debe desactivar el bucle de animación y los módulos de eventos. +- También debemos especificar la `height` y `width` del gráfico, por lo que si el tamaño del gráfico debe ser sensible al contenedor, es posible que debas pensar si el renderizado del lado del servidor es adecuado para tu escenario. + +En el navegador, ECharts renderiza automáticamente el resultado en la página después de `setOption` y luego determina en cada cuadro si hay una animación que necesita ser redibujada, pero en Node.js no hacemos esto después de establecer `ssr: true`. En su lugar, usamos `renderToSVGString` para renderizar el gráfico actual como una cadena SVG, que luego puede ser devuelta al frontend mediante la respuesta HTTP o guardada en un archivo local. + +Respuesta al navegador (usando Express.js como ejemplo): + +```ts +res.writeHead(200, { + 'Content-Type': 'application/xml' +}); +res.write(svgStr); // svgStr is the result of chart.renderToSVGString() +res.end(); +``` + +Or save to a local file + +```ts +fs.writeFile('bar.svg', svgStr, 'utf-8'); +``` + +#### Animaciones en el renderizado del lado del servidor + +Como puedes ver en el ejemplo anterior, incluso con el renderizado del lado del servidor, ECharts aún puede proporcionar efectos de animación, que se logran insertando animaciones CSS en la cadena SVG de salida. No se necesita JavaScript adicional para ejecutar la animación. + +Sin embargo, las limitaciones de las animaciones CSS impiden implementar animaciones más flexibles en el renderizado del lado del servidor, como animaciones de gráficos de barras en carrera, animaciones de etiquetas y efectos especiales en la serie `lines` La animación de algunas series, como `pie`, ha sido optimizada específicamente para el renderizado del lado del servidor. + + +Si no deseas esta animación, puedes desactivarla configurando`animation: false` al utilizar `setOption`. + +```ts +setOption({ + animation: false +}); +``` + +### Renderizado del lado del servidor en Canvas + +Si deseas que la salida sea una imagen en lugar de una cadena SVG, o si estás utilizando una versión más antigua, te recomendamos usar [node-canvas](https://github.com/Automattic/node-canvas) para el renderizado del lado del servidor.[node-canvas](https://github.com/Automattic/node-canvas) es una implementación de Canvas en Node.js que proporciona una interfaz casi idéntica a la de Canvas en el navegador. + +Aquí tienes un ejemplo simple: + +```ts +var echarts = require('echarts'); +const { createCanvas } = require('canvas'); + +// In versions earlier than 5.3.0, you had to register the canvas factory with setCanvasCreator. +// Not necessary since 5.3.0 +echarts.setCanvasCreator(() => { + return createCanvas(); +}); + +const canvas = createCanvas(800, 600); +// ECharts can use the Canvas instance created by node-canvas as a container directly +let chart = echarts.init(canvas); + +// setOption as normal +chart.setOption({ + //... +}); + +const buffer = renderChart().toBuffer('image/png'); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; + +// Output the PNG image via Response +res.writeHead(200, { + 'Content-Type': 'image/png' +}); +res.write(buffer); +res.end(); +``` + +#### Carga de imágenes + +[node-canvas](https://github.com/Automattic/node-canvas) proporciona una implementación de `Image` para la carga de imágenes. Si utilizas imágenes en tu código, podemos adaptarlas utilizando la interfaz `setPlatformAPI` que se introdujo en la versión `5.3.0`. + +```ts +echarts.setPlatformAPI({ + // Same with the old setCanvasCreator + createCanvas() { + return createCanvas(); + }, + loadImage(src, onload, onerror) { + const img = new Image(); + // must be bound to this context. + img.onload = onload.bind(img); + img.onerror = onerror.bind(img); + img.src = src; + return img; + } +}); +``` +Si está utilizando imágenes de forma remota, le recomendamos que prefetch la imagen a través de una petición http para obtener `base64` antes de pasarlo como la URL de la imagen, para asegurarse de que la imagen se carga cuando se renderiza. + + +## Hidratación del cliente + +### Carga diferida de ECharts completa + +Con la última versión de ECharts, la solución de renderizado del lado del servidor puede hacer lo siguiente al renderizar el gráfico: + +- Soporte para la animación inicial (es decir, la animación que se reproduce cuando el gráfico se renderiza por primera vez). +- Estilos de resaltado (es decir, el efecto de resaltado cuando el mouse pasa sobre una barra en un gráfico de barras). + +Pero hay características que no pueden ser soportadas por el renderizado del lado del servidor: + +- Cambio dinámico de datos +- Hacer clic en una leyenda para alternar si la serie se muestra o no +- Mover el mouse para mostrar un tooltip +- Otras características relacionadas con la interacción + +Si tienes tales requisitos, puedes considerar usar renderizado del lado del servidor para generar rápidamente el gráfico en la primera pantalla, luego esperar a que `echarts.js` termine de cargarse y volver a renderizar el mismo gráfico en el lado del cliente, para que puedas lograr efectos de interacción normales y cambiar los datos dinámicamente. Ten en cuenta que al renderizar en el lado del cliente, debes activar los componentes interactivos como `tooltip: { show: true }` y desactivar la animación inicial con `animation: 0` (la animación inicial debe ser realizada por la animación SVG del resultado renderizado en el servidor). + +Como se puede ver, desde el punto de vista de la experiencia del usuario, casi no hay un proceso de renderizado secundario, y el efecto de cambio es muy fluido. También puedes usar una biblioteca como [pace-js](https://www.npmjs.com/package/pace-js) para mostrar una barra de progreso de carga durante la carga de `echarts.js` como en el ejemplo anterior, para resolver el problema de la falta de retroalimentación interactiva antes de que los ECharts estén completamente cargados. + +Usar renderizado del lado del servidor con renderizado del lado del cliente y carga diferida de `echarts.js` en el lado del cliente es una buena solución para escenarios en los que se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. Sin embargo, toma algo de tiempo cargar `echarts.js` y, antes de que se cargue completamente, no hay retroalimentación interactiva, por lo que se podría mostrar un texto de "Cargando" al usuario. Esta es una solución comúnmente recomendada para escenarios donde se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. + +### Tiempo de ejecución ligero en el cliente + +La solución A proporciona una forma de implementar interacciones completas, pero en algunos escenarios, no necesitamos interacciones complejas, solo esperamos poder realizar algunas interacciones simples en el cliente basadas en el renderizado del lado del servidor, como: hacer clic en la leyenda para alternar si la serie se muestra. En este caso, ¿podemos evitar cargar al menos unos cientos de KBs del código de ECharts en el cliente? + +A partir de la versión v5.5.0, si el gráfico solo necesita los siguientes efectos e interacciones, se puede lograr mediante el renderizado SVG del lado del servidor + tiempo de ejecución ligero en el cliente: + +- Animación inicial del gráfico (principio de implementación: el SVG renderizado por el servidor incluye animación CSS). +- Estilo de resaltado (principio de implementación: el SVG renderizado por el servidor incluye animación CSS) +- Cambio dinámico de datos (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). +- Hacer clic en la leyenda para alternar si la serie se muestra (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). + +```html + + + + +``` + +El servidor realiza el renderizado secundario basado en la información pasada por el cliente sobre si cada serie se muestra (`isSeriesShown`) y devuelve una nueva cadena SVG. El código del lado del servidor [is the same as above](#server-side-svg-rendering), por lo que no se repetirá. + +> Acerca del registro del estado: En comparación con el renderizado puramente del lado del cliente, los desarrolladores deben registrar y mantener información adicional (como si cada serie se muestra en este ejemplo). Esto es inevitable porque las solicitudes HTTP son sin estado. Si quieres implementar un estado, o el cliente lo registra y lo pasa como en el ejemplo anterior, o el servidor mantiene el estado (por ejemplo, a través de una sesión, pero esto requiere más memoria del servidor y una lógica de destrucción más compleja, por lo que no se recomienda). + +Usar renderizado SVG del lado del servidor más tiempo de ejecución ligero del lado del cliente tiene la ventaja de que el cliente ya no necesita cargar cientos de KBs del código de ECharts, solo necesita cargar un código de tiempo de ejecución ligero de menos de 4 KB; y desde la experiencia del usuario, se pierde muy poco (admite animación inicial, resaltado al pasar el mouse). La desventaja es que requiere un costo de desarrollo para mantener información de estado adicional y no admite interacciones con requisitos de tiempo real muy altos (como mostrar tooltips al mover el mouse). En general, **se recomienda usarlo en entornos con requisitos muy estrictos para el volumen de código.**. + +## Usando Tiempo de Ejecución Ligero + +El tiempo de ejecución ligero en el cliente permite la interacción con los gráficos SVG renderizados por el servidor al comprender el contenido. + +El tiempo de ejecución ligero en el cliente se puede importar de las siguientes maneras: + +```html + + + + +``` + +### API + +Las siguientes APIs se proporcionan en la variable global `window['echarts-ssr-client']`: + +#### hydrate(dom: HTMLElement, options: ECSSRClientOptions) + +- `dom`: El contenedor del gráfico, cuyo contenido debe establecerse como el gráfico SVG renderizado por el servidor antes de llamar a este método. +- `options`: Elementos de configuración + +##### ECSSRClientOptions + +```ts +on?: { + mouseover?: (params: ECSSRClientEventParams) => void, + mouseout?: (params: ECSSRClientEventParams) => void, + click?: (params: ECSSRClientEventParams) => void +} +``` + +Al igual que los [chart mouse events](${mainSitePath}api.html#events.Mouse%20events), los eventos aquí son para los elementos del gráfico (por ejemplo, las barras de un gráfico de barras, el ítem de datos de un gráfico de líneas, etc.), no para el contenedor del gráfico. + +##### ECSSRClientEventParams + +```ts +{ + type: 'mouseover' | 'mouseout' | 'click'; + ssrType: 'legend' | 'chart'; + seriesIndex?: number; + dataIndex?: number; + event: Event; +} +``` + +- `type`: Event type +- `ssrType`: Event object type, `legend` represents legend data, `chart` represents chart data object +- `seriesIndex`: Series index +- `dataIndex`: Data index +- `event`: Native event object + +### Ejemplo + +Ver la sección de "Tiempo de ejecución ligero en el cliente" anterior. + +## Resumen + +Arriba, hemos introducido varias soluciones de renderizado diferentes, incluyendo: + +- Client-side rendering +- Server-side SVG rendering +- Server-side Canvas rendering +- Client-side lightweight runtime rendering + +These four rendering methods can be used in combination. Let's summarize their respective applicable scenarios: + +| Rendering Solution | Loading Volume | Loss of Function and Interaction | Relative Development Workload | Recommended Scenario | +| --- | --- | --- | --- | --- | +| Client-side rendering | Largest | None | Minimum | The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction | +| Client-side rendering ([partial package importing](${lang}/basics/import#shrinking-bundle-size) on demand) | Large | Large: the packages not included cannot use the corresponding functions | Small | The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources | +| One-time server-side SVG rendering | Small | Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction | +| One-time server-side Canvas rendering | Large | Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG | +| Server-side SVG rendering plus client-side ECharts lazy loading | Small, then large | Medium: cannot interact before lazy loading is completed | Medium | The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading | +| Server-side SVG rendering plus client-side lightweight runtime | Small | Medium: Cannot implement interactions with high real-time requirements | Large (need to maintain chart status, define client-server interface protocol) | The first screen load time is sensitive, low demand for complete functionality and interaction, very strict requirements for code volume, not strict requirements for interaction real-time | +| Server-side SVG rendering plus client-side ECharts lazy loading, using lightweight runtime before lazy loading is completed | Small, then large | Small: Cannot perform complex interactions before lazy loading is completed | Largest | The first screen load time is sensitive, high demand for complete functionality and interaction, sufficient development time | + + +Por supuesto, existen otras posibilidades de combinación, pero las más comunes son las anteriores. Creo que si entiendes las características de estas soluciones de renderizado, podrás elegir la solución adecuada en función de tu propio escenario. \ No newline at end of file diff --git a/contents/es/how-to/data/drilldown.md b/contents/es/how-to/data/drilldown.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/how-to/data/dynamic-data.md b/contents/es/how-to/data/dynamic-data.md new file mode 100644 index 000000000..d727263b0 --- /dev/null +++ b/contents/es/how-to/data/dynamic-data.md @@ -0,0 +1,114 @@ +# Carga Asíncrona de Datos y Actualización Dinámica + +## Carga Asíncrona + +En el [Getting Started Example](${lang}/get-started) los datos se actualizan directamente usando `setOption`. Pero en muchos casos, los datos necesitan ser llenados mediante carga asíncrona de manera frecuente. `ECharts` puede implementar la carga asíncrona de manera sencilla. Puedes obtener los datos de manera asíncrona a través de una función como jQuery y usar `setOption` para llenar los datos y configuraciones después de que el gráfico haya sido inicializado. + +```js +var myChart = echarts.init(document.getElementById('main')); + +$.get('data.json').done(function(data) { + // Structure of data: + // { + // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"], + // values: [5, 20, 36, 10, 10, 20] + // } + myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: {}, + xAxis: { + data: data.categories + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: data.values + } + ] + }); +}); +``` + +O mostrar los ejes vacíos con todos los estilos definidos antes de llenar los datos: + +```js +var myChart = echarts.init(document.getElementById('main')); +// Show title, legends and empty axes +myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: { + data: ['Sales'] + }, + xAxis: { + data: [] + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: [] + } + ] +}); + +// Asynchronous Data Loading +$.get('data.json').done(function(data) { + // Fill in the data + myChart.setOption({ + xAxis: { + data: data.categories + }, + series: [ + { + // Find series by name + name: 'Sales', + data: data.data + } + ] + }); +}); +``` + +Por ejemplo: + +![]()
+
+
+Es decir, si un elemento se encuentra dentro del radio `opt.pointerSize` de la posición del ratón o toque, el elemento intersectado más cercano será considerado el objeto interactivo.
+
+## Rendimiento
+
+En cuanto a la implementación, primero se juzga la intersección entre la posición del ratón o toque y la caja delimitadora AABB de todos los elementos interactivos, para eliminar rápidamente la mayoría de los elementos que no están intersectando. Luego, se realiza un juicio de intersección más preciso en los elementos restantes. Por lo tanto, desde la perspectiva de la experiencia del usuario, casi no hay pérdida de rendimiento perceptible.
+
+
+Para gráficos de series con grandes cantidades de datos (es decir, gráficos de barras, gráficos de dispersión, etc., con `large: true` enabled), el ajuste no se habilitará.
diff --git a/contents/es/how-to/interaction/drag.md b/contents/es/how-to/interaction/drag.md
new file mode 100644
index 000000000..97bc4c568
--- /dev/null
+++ b/contents/es/how-to/interaction/drag.md
@@ -0,0 +1,271 @@
+# Un Ejemplo: Implementación de Arrastre
+
+Este es un ejemplo pequeño que introduce cómo implementar el arrastre de elementos gráficos en Apache EChartsTM. Con este ejemplo, veremos cómo crear una aplicación rica en interactividad basada en la API de ECharts.
+
+
+
Y: ' + + params.data[1].toFixed(2) + ); + } + } +}); +``` + +```js +myChart.setOption({ + graphic: data.map(function(item, dataIndex) { + return { + type: 'circle', + // ..., + // Customize "show/hide rule", show when mouse over, hide when mouse out. + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex) + }; + }) +}); + +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} + +function hideTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'hideTip' + }); +} +``` + +Se utiliza la API [dispatchAction](${mainSitePath}/api.html#echartsInstance.dispatchAction) para mostrar/ocultar el contenido del tooltip, donde se despachan las acciones [showTip](${mainSitePath}/api.html#action.tooltip.showTip) y [hideTip](api.html#action.tooltip.hideTip) is dispatched. + +## Código Completo + +El código completo es el siguiente: + +```js +import echarts from 'echarts'; + +var symbolSize = 20; +var data = [ + [15, 0], + [-50, 10], + [-56.5, 20], + [-46.5, 30], + [-22.1, 40] +]; +var myChart = echarts.init(document.getElementById('main')); +myChart.setOption({ + tooltip: { + triggerOn: 'none', + formatter: function(params) { + return ( + 'X: ' + + params.data[0].toFixed(2) + + '
Y: ' + + params.data[1].toFixed(2) + ); + } + }, + xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } }, + yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } }, + series: [ + { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data } + ] +}); +myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { + type: 'circle', + position: myChart.convertToPixel('grid', item), + shape: { r: symbolSize / 2 }, + invisible: true, + draggable: true, + ondrag: echarts.util.curry(onPointDragging, dataIndex), + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex), + z: 100 + }; + }) +}); +window.addEventListener('resize', function() { + myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { position: myChart.convertToPixel('grid', item) }; + }) + }); +}); +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} +function hideTooltip(dataIndex) { + myChart.dispatchAction({ type: 'hideTip' }); +} +function onPointDragging(dataIndex, dx, dy) { + data[dataIndex] = myChart.convertFromPixel('grid', this.position); + myChart.setOption({ + series: [ + { + id: 'a', + data: data + } + ] + }); +} +``` + +Con los conocimientos introducidos anteriormente, se pueden implementar más características. Por ejemplo, se puede agregar un [dataZoom component](${optionPath}dataZoom) para cooperar con el sistema cartesiano, o crear una pizarra de gráficos sobre sistemas de coordenadas. ¡Usa tu imaginación! \ No newline at end of file diff --git a/contents/es/how-to/label/rich-text.md b/contents/es/how-to/label/rich-text.md new file mode 100644 index 000000000..0018b4369 --- /dev/null +++ b/contents/es/how-to/label/rich-text.md @@ -0,0 +1,502 @@ +# Texto Enriquecido + +El texto enriquecido se puede utilizar en las etiquetas de las series, ejes u otros componentes de Apache ECharts™ desde la versión 3.7. Esta característica admite: + +- Estilos de caja (fondo, borde, sombra, etc.), rotación y posición de un bloque de texto pueden especificarse. +- Se pueden personalizar estilos (color, fuente, ancho/alto, fondo, sombra, etc.) y alineación en fragmentos de texto. +- Se pueden usar imágenes en el texto como íconos o fondo. +- Combinando estas configuraciones, se pueden crear efectos especiales, como tablas simples o reglas horizontales (hr). + +Al principio, es importante aclarar los significados de dos términos que se utilizarán a continuación: + +- Text Block: Todo el bloque de texto de la etiqueta. +- Text fragment: Una parte del texto en un bloque de texto. + +Por ejemplo: + +![]()
+```
+
+## Añadir un ejemplo de Iframe
+
+`src` es la cadena que sigue a `?c=` en la direccion https://echarts.apache.org/examples/en/editor.html?c=line-simple address
+
+Uso:
+
+```markdown
+
+Esta es una alerta de Informacion.
+
+```
+
+
+Esta es una alerta de Informacion.
+
+
+```markdown
+
+Esta es una alerta de exito.
+
+```
+
+
+Esta es una alerta de Informacion.
+
+
+```markdown
+
+Esta es una alerta de Advertencia.
+
+```
+
+
+Esta es una alerta de Advertencia.
+
+
+```markdown
+
+Esta es una alerta de peligro.
+
+```
+
+
+Esta es una alerta de peligro.
+
diff --git a/contents/es/posts.yml b/contents/es/posts.yml
new file mode 100644
index 000000000..956aaeba2
--- /dev/null
+++ b/contents/es/posts.yml
@@ -0,0 +1,159 @@
+- title: Empezar
+ dir: get-started
+- title: Basicos
+ dir: basics
+ children:
+ - title: Descargar ECharts
+ dir: download
+ - title: Importar ECharts
+ dir: import
+ - title: Recursos
+ dir: resource
+ draft: true
+ # - title: Inspiration
+ # dir: inspiration
+ - title: Obtener Ayudar
+ dir: help
+ - title: Novedades
+ dir: release-note
+ children:
+ - title: ECharts 5 Features
+ dir: v5-feature
+ - title: Migration from v4 to v5
+ dir: v5-upgrade-guide
+ - title: 5.2
+ dir: 5-2-0
+ - title: 5.3
+ dir: 5-3-0
+ - title: 5.4
+ dir: 5-4-0
+ - title: 5.5
+ dir: 5-5-0
+ - title: 5.6
+ dir: 5-6-0
+- title: Conceptos
+ dir: concepts
+ children:
+ - title: Contenedor de Graficos
+ dir: chart-size
+ - title: Opciones de Graficos
+ dir: options
+ draft: true
+ - title: Series
+ dir: series
+ draft: true
+ - title: Estilos
+ dir: style
+ - title: Conjunto de Datos
+ dir: dataset
+ - title: Trasformacion de Datos
+ dir: data-transform
+ - title: Coordenadas
+ dir: coordinate
+ draft: true
+ - title: Axis
+ dir: axis
+ - title: Mapeo Visual
+ dir: visual-map
+ - title: Leyenda
+ dir: legend
+ - title: Eventos y Acciones
+ dir: event
+- title: Guias de Como Hacer
+ dir: how-to
+ children:
+ - title: Graficos Comunes
+ dir: chart-types
+ children:
+ - title: Barras
+ dir: bar
+ children:
+ - title: Barra Basica
+ dir: basic-bar
+ - title: Barra Apilada
+ dir: stacked-bar
+ - title: Barra en Carrera
+ dir: bar-race
+ - title: Barra Polar
+ dir: polar-bar
+ draft: true
+ - title: Cascada
+ dir: waterfall
+ - title: Lineas
+ dir: line
+ children:
+ - title: Linea Basica
+ dir: basic-line
+ - title: Linea Apilada
+ dir: stacked-line
+ - title: Grafico de Area
+ dir: area-line
+ - title: Linea Suavizada
+ dir: smooth-line
+ - title: Linea de Escalon
+ dir: step-line
+ - title: Pastel
+ dir: pie
+ children:
+ - title: Pastel Basico
+ dir: basic-pie
+ - title: Estilo de Anillo
+ dir: doughnut
+ - title: Estilo Rosa
+ dir: rose
+ - title: Dispersion
+ dir: scatter
+ children:
+ - title: Dispersion Basica
+ dir: basic-scatter
+ - title: Movil
+ dir: mobile
+ draft: true
+ - title: Plataforma Cruzada
+ dir: cross-platform
+ children:
+ - title: Renderizado del Lado del Servidor
+ dir: server
+ - title: Datos
+ dir: data
+ children:
+ - title: Datos Dinamicos
+ dir: dynamic-data
+ - title: Drilldown
+ dir: drilldown
+ draft: true
+ - title: Etiquetas
+ dir: label
+ children:
+ - title: Texto en Ricos
+ dir: rich-text
+ - title: Animacion
+ dir: animation
+ children:
+ - title: Transicion de Datos
+ dir: transition
+ - title: Interaccion
+ dir: interaction
+ children:
+ - title: Arrastre
+ dir: drag
+ - title: Conectar
+ dir: connect
+ draft: true
+ - title: Ajuste Inteligente de Puntero
+ dir: coarse-pointer
+- title: Mejores Practicas
+ dir: best-practices
+ children:
+ - title: Optimizacion para Moviles
+ dir: mobile
+ draft: true
+ - title: Canvas vs. SVG
+ dir: canvas-vs-svg
+ - title: Aria
+ dir: aria
+- title: Edit Manual
+ dir: meta
+ children:
+ - title: Editar Guia
+ dir: edit-guide
diff --git a/nuxt.config.js b/nuxt.config.js
index ff5e55d76..8be94142c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -69,16 +69,16 @@ export default {
[
'nuxt-i18n',
{
- locales: ['en', 'zh'],
+ locales: ['en', 'zh' ,'es'],
strategy: 'prefix',
- defaultLocale: 'en',
+ defaultLocale: 'es',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
onlyOnRoot: true
},
vueI18n: {
- fallbackLocale: 'en',
+ fallbackLocale: 'zh',
messages: {
en: {
inThisPage: 'In This Page',
@@ -93,6 +93,13 @@ export default {
contributorsWithThisDocument: '本文贡献者',
editInThisDocumentTip: '编辑本文',
editInGithub: '在 GitHub 上编辑本页'
+ },
+ es: {
+ inThisPage: 'En esta página',
+ searchHandbook: 'Buscar en el manual',
+ contributorsWithThisDocument: 'Contribuidores',
+ editInThisDocumentTip: 'Editar este documento',
+ editInGithub: 'Editar esta página en GitHub'
}
}
}
diff --git a/pages/_.vue b/pages/_.vue
index 0f359ecd6..4700e0209 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -7,7 +7,7 @@
{{ link.title }}
diff --git a/pages/index.vue b/pages/index.vue
index b839fad7f..78bed7462 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,9 @@
-
{b} : {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: [ + 'Direct Access', + 'Email Marketing', + 'Affiliate Ads', + 'Video Ads', + 'Search Engines' + ] + }, + series: [ + { + name: 'Access Source', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { value: 335, name: 'Direct Access' }, + { value: 310, name: 'Email Marketing' }, + { value: 234, name: 'Affiliate Ads' }, + { value: 135, name: 'Video Ads' }, + { value: 1548, name: 'Search Engines' } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] +}; + +let currentIndex = -1; + +setInterval(function() { + var dataLen = option.series[0].data.length; + myChart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: currentIndex + }); + currentIndex = (currentIndex + 1) % dataLen; + myChart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }); + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: currentIndex + }); +}, 1000); +``` + +## Escuchar Eventos en el Área Vacía + +A veces los desarrolladores necesitan escuchar los eventos que se disparan desde el área vacía del lienzo. Por ejemplo, es necesario restablecer el gráfico cuando los usuarios hacen clic en el área vacía. + +Antes de hablar sobre esta función, necesitamos aclarar dos tipos de eventos: eventos zrender y eventos echarts. + +```js +myChart.getZr().on('click', function(event) { + // This listener is listening to a `zrender event`. +}); +myChart.on('click', function(event) { + // This listener is listening to a `echarts event`. +}); +``` + +Los eventos de zrender son diferentes de los eventos de echarts. Los primeros se activan cuando el ratón/puntero está en cualquier lugar, mientras que los segundos solo se activan cuando el ratón/puntero está sobre los elementos gráficos. De hecho, los eventos de echarts se implementan basándose en los eventos de zrender, es decir, cuando un evento de zrender se activa sobre un elemento gráfico, echarts activará un evento de echarts. + +Teniendo en cuenta los eventos de zrender, podemos implementar la escucha de eventos desde el área en blanco de la siguiente manera: + +```js +myChart.getZr().on('click', function(event) { + // No "target" means that mouse/pointer is not on + // any of the graphic elements, which is "blank". + if (!event.target) { + // Click on blank. Do something. + } +}); +``` diff --git a/contents/es/concepts/legend.md b/contents/es/concepts/legend.md new file mode 100644 index 000000000..34a643c0f --- /dev/null +++ b/contents/es/concepts/legend.md @@ -0,0 +1,143 @@ +# Leyenda + +Las leyendas se utilizan para anotar el contenido del gráfico utilizando diferentes colores, formas y textos para indicar distintas categorías. Al hacer clic en las leyendas, el usuario puede mostrar u ocultar las categorías correspondientes. La leyenda es clave para entender el gráfico. + +## Diseño + +La leyenda siempre se coloca en la esquina superior derecha del gráfico. Todas las leyendas en la misma página deben ser consistentes, alineándose horizontal o verticalmente según el diseño general del espacio del gráfico. Cuando el gráfico tiene poco espacio vertical o el área de contenido está congestionada, también es una buena opción colocar la leyenda en la parte inferior del gráfico. A continuación se muestran algunos diseños de leyenda: + +```js live +option = { + legend: { + // Try 'horizontal' + orient: 'vertical', + right: 10, + top: 'center' + }, + dataset: { + source: [ + ['product', '2015', '2016', '2017'], + ['Matcha Latte', 43.3, 85.8, 93.7], + ['Milk Tea', 83.1, 73.4, 55.1], + ['Cheese Cocoa', 86.4, 65.2, 82.5], + ['Walnut Brownie', 72.4, 53.9, 39.1] + ] + }, + xAxis: { type: 'category' }, + yAxis: {}, + series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] +}; +``` +Usa un control desplazable si hay muchas leyendas. + + +```js +option = { + legend: { + type: 'scroll', + orient: 'vertical', + right: 10, + top: 20, + bottom: 20, + data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x'] + // ... + } + // ... +}; +``` + +## Estilo + +Para fondos de color oscuro, utiliza un color claro para la capa de fondo y el texto mientras cambias el fondo a translúcido. + +```js +option = { + legend: { + data: ['Legend A', 'Legend B', 'Legend C'], + backgroundColor: '#ccc', + textStyle: { + color: '#ccc' + // ... + } + // ... + } + // ... +}; +``` + +El color de la leyenda tiene muchas formas de diseñarse. Para diferentes gráficos, el estilo de la leyenda puede ser distinto. + +
+
+```js
+option = {
+ legend: {
+ data: ['Legend A', 'Legend B', 'Legend C'],
+ icon: 'rect'
+ // ...
+ }
+ // ...
+};
+```
+
+## Interactivo
+
+Dependiendo de la demanda ambiental, la leyenda puede soportar operaciones interactivas. Haz clic en la leyenda para mostrar u ocultar las categorías correspondientes:
+
+```js
+option = {
+ legend: {
+ data: ['Legend A', 'Legend B', 'Legend C'],
+ selected: {
+ 'Legend A': true,
+ 'Legend B': true,
+ 'Legend C': false
+ }
+ // ...
+ }
+ // ...
+};
+```
+
+## Consejos
+
+La leyenda debe utilizarse según la situación. Algunos gráficos de doble eje incluyen varios tipos de gráficos. Los diferentes tipos de leyenda deben distinguirse.
+
+```js
+option = {
+ legend: {
+ data: [
+ {
+ name: 'Legend A',
+ icon: 'rect'
+ },
+ {
+ name: 'Legend B',
+ icon: 'circle'
+ },
+ {
+ name: 'Legend C',
+ icon: 'pin'
+ }
+ ]
+ // ...
+ },
+ series: [
+ {
+ name: 'Legend A'
+ // ...
+ },
+ {
+ name: 'Legend B'
+ // ...
+ },
+ {
+ name: 'Legend C'
+ // ...
+ }
+ ]
+ // ...
+};
+```
+
+Cuando hay solo un tipo de dato en el gráfico, usa el título del gráfico en lugar de la leyenda para explicarlo.
diff --git a/contents/es/concepts/options.md b/contents/es/concepts/options.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/series.md b/contents/es/concepts/series.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/style.md b/contents/es/concepts/style.md
new file mode 100644
index 000000000..cc6ad0c3f
--- /dev/null
+++ b/contents/es/concepts/style.md
@@ -0,0 +1,356 @@
+# Resumen de la Personalización de Estilos
+
+Este artículo ofrece un resumen de los diferentes enfoques sobre la personalización de estilos en Apache EChartsTM. Por ejemplo, cómo configurar el color, tamaño, sombra de los elementos gráficos y etiquetas.
+
+> El término "estilo" puede no seguir la convención de la visualización de datos, pero lo usamos en este artículo porque es popular y fácil de entender.
+
+A continuación, se presentarán los enfoques. Las funcionalidades de estos pueden solaparse, pero son adecuados para diferentes escenarios.
+
+- Tema
+- Paleta de Colores
+- Personalizar estilo explícitamente (itemStyle, lineStyle, areaStyle, label, ...)
+- Codificación visual (visualMap component)
+
+## Tema
+
+Establecer un tema es la forma más sencilla de cambiar el estilo de color. Por ejemplo, en la [Examples page](${mainSitePath}examples),podemos cambiar a modo oscuro y ver el resultado de un tema diferente.
+
+En nuestro proyecto, podemos cambiar a un tema oscuro de la siguiente manera:
+
+```js
+var chart = echarts.init(dom, 'dark');
+```
+
+Otros temas no están incluidos por defecto, y necesitamos cargarlos nosotros mismos si queremos utilizarlos. Los temas pueden ser visitados y descargados en el [theme builder](${mainSitePath}theme-builder.html). En él, también se pueden crear o editar temas. El tema descargado se puede usar de la siguiente manera:
+
+Si un tema se descarga como un archivo JSON, debemos registrarlo nosotros mismos, por ejemplo:
+
+```js
+// Assume the theme name is "vintage".
+fetch('theme/vintage.json')
+ .then(r => r.json())
+ .then(theme => {
+ echarts.registerTheme('vintage', theme);
+ var chart = echarts.init(dom, 'vintage');
+ })
+```
+
+If a theme is downloaded as a JS file, it will auto register itself:
+
+```js
+// Import the `vintage.js` file in HTML, then:
+var chart = echarts.init(dom, 'vintage');
+// ...
+```
+
+## Paleta de Colores
+
+La paleta de colores puede proporcionarse en la opción. Estas proporcionan un grupo de colores, que serán seleccionados automáticamente por las series y los datos. Podemos dar una paleta global, o una paleta exclusiva para ciertas series.
+
+```js
+option = {
+ // Global palette:
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ],
+
+ series: [
+ {
+ type: 'bar',
+ // A palette only work for the series:
+ color: [
+ '#dd6b66',
+ '#759aa0',
+ '#e69d87',
+ '#8dc1a9',
+ '#ea7e53',
+ '#eedd78',
+ '#73a373',
+ '#73b9bc',
+ '#7289ab',
+ '#91ca8c',
+ '#f49f42'
+ ]
+ // ...
+ },
+ {
+ type: 'pie',
+ // A palette only work for the series:
+ color: [
+ '#37A2DA',
+ '#32C5E9',
+ '#67E0E3',
+ '#9FE6B8',
+ '#FFDB5C',
+ '#ff9f7f',
+ '#fb7293',
+ '#E062AE',
+ '#E690D1',
+ '#e7bcf3',
+ '#9d96f5',
+ '#8378EA',
+ '#96BFFF'
+ ]
+ // ...
+ }
+ ]
+};
+```
+
+## Personalizar Estilo de Forma Explícita
+
+Es una forma común de establecer estilos de manera explícita. A lo largo de la [option](${optionPath}), de ECharts, se pueden configurar opciones relacionadas con el estilo en varios lugares, incluyendo [itemStyle](${optionPath}series.itemStyle), [lineStyle](${optionPath}series-line.lineStyle), [areaStyle](${optionPath}series-line.areaStyle), [label](${optionPath}series.label), etc.
+
+En términos generales, todos los componentes y series incorporados siguen la convención de nombres como `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, aunque pueden aparecer en diferentes lugares según la serie o componente.
+
+En el siguiente código, añadimos sombra y degradado a un gráfico de burbujas.
+
+```js live
+var data = [
+ [
+ [28604, 77, 17096869, 'Australia', 1990],
+ [31163, 77.4, 27662440, 'Canada', 1990],
+ [1516, 68, 1154605773, 'China', 1990],
+ [13670, 74.7, 10582082, 'Cuba', 1990],
+ [28599, 75, 4986705, 'Finland', 1990],
+ [29476, 77.1, 56943299, 'France', 1990],
+ [31476, 75.4, 78958237, 'Germany', 1990],
+ [28666, 78.1, 254830, 'Iceland', 1990],
+ [1777, 57.7, 870601776, 'India', 1990],
+ [29550, 79.1, 122249285, 'Japan', 1990],
+ [2076, 67.9, 20194354, 'North Korea', 1990],
+ [12087, 72, 42972254, 'South Korea', 1990],
+ [24021, 75.4, 3397534, 'New Zealand', 1990],
+ [43296, 76.8, 4240375, 'Norway', 1990],
+ [10088, 70.8, 38195258, 'Poland', 1990],
+ [19349, 69.6, 147568552, 'Russia', 1990],
+ [10670, 67.3, 53994605, 'Turkey', 1990],
+ [26424, 75.7, 57110117, 'United Kingdom', 1990],
+ [37062, 75.4, 252847810, 'United States', 1990]
+ ],
+ [
+ [44056, 81.8, 23968973, 'Australia', 2015],
+ [43294, 81.7, 35939927, 'Canada', 2015],
+ [13334, 76.9, 1376048943, 'China', 2015],
+ [21291, 78.5, 11389562, 'Cuba', 2015],
+ [38923, 80.8, 5503457, 'Finland', 2015],
+ [37599, 81.9, 64395345, 'France', 2015],
+ [44053, 81.1, 80688545, 'Germany', 2015],
+ [42182, 82.8, 329425, 'Iceland', 2015],
+ [5903, 66.8, 1311050527, 'India', 2015],
+ [36162, 83.5, 126573481, 'Japan', 2015],
+ [1390, 71.4, 25155317, 'North Korea', 2015],
+ [34644, 80.7, 50293439, 'South Korea', 2015],
+ [34186, 80.6, 4528526, 'New Zealand', 2015],
+ [64304, 81.6, 5210967, 'Norway', 2015],
+ [24787, 77.3, 38611794, 'Poland', 2015],
+ [23038, 73.13, 143456918, 'Russia', 2015],
+ [19360, 76.5, 78665830, 'Turkey', 2015],
+ [38225, 81.4, 64715810, 'United Kingdom', 2015],
+ [53354, 79.1, 321773631, 'United States', 2015]
+ ]
+];
+
+option = {
+ backgroundColor: {
+ type: 'radial',
+ x: 0.3,
+ y: 0.3,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#f7f8fa'
+ },
+ {
+ offset: 1,
+ color: '#cdd0d5'
+ }
+ ]
+ },
+ grid: {
+ left: 10,
+ containLabel: true,
+ bottom: 10,
+ top: 10,
+ right: 30
+ },
+ xAxis: {
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: false
+ },
+ scale: true
+ },
+ series: [
+ {
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(120, 36, 50, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(251, 118, 123)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(204, 46, 72)'
+ }
+ ]
+ }
+ }
+ },
+ {
+ name: '2015',
+ data: data[1],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(25, 100, 150, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(129, 227, 238)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(25, 183, 207)'
+ }
+ ]
+ }
+ }
+ }
+ ]
+};
+```
+
+## Estado de Estilo de Énfasis
+
+Cuando el mouse pasa por encima de un elemento gráfico, generalmente se mostrará el estilo de énfasis. Por defecto, el estilo de énfasis se genera automáticamente a partir del estilo normal. Sin embargo, se puede especificar mediante la propiedad [emphasis](${optionPath}series-bar.emphasis) Las opciones en [emphasis](${optionPath}series-bar.emphasis) son las mismas que las del estado normal, por ejemplo:
+
+```js
+option = {
+ series: {
+ type: 'scatter',
+
+ // Styles for normal state.
+ itemStyle: {
+ // Color of the point.
+ color: 'red'
+ },
+ label: {
+ show: true,
+ // Text of labels.
+ formatter: 'This is a normal label.'
+ },
+
+ // Styles for emphasis state.
+ emphasis: {
+ itemStyle: {
+ // Color in emphasis state.
+ color: 'blue'
+ },
+ label: {
+ show: true,
+ // Text in emphasis.
+ formatter: 'This is a emphasis label.'
+ }
+ }
+ }
+};
+```
+
+Nota: Antes de ECharts4, el estilo de énfasis debía escribirse de la siguiente manera:
+
+```js
+option = {
+ series: {
+ type: 'scatter',
+
+ itemStyle: {
+ // Styles for normal state.
+ normal: {
+ color: 'red'
+ },
+ // Styles for emphasis state.
+ emphasis: {
+ color: 'blue'
+ }
+ },
+
+ label: {
+ // Styles for normal state.
+ normal: {
+ show: true,
+ formatter: 'This is a normal label.'
+ },
+ // Styles for emphasis state.
+ emphasis: {
+ show: true,
+ formatter: 'This is a emphasis label.'
+ }
+ }
+ }
+};
+```
+
+El formato de opción sigue siendo **compatible**, pero no se recomienda. De hecho, en la mayoría de los casos, los usuarios solo configuran el estilo normal y utilizan el estilo de énfasis predeterminado. Por lo tanto, desde ECharts4, se admite escribir el estilo sin el término "normal", lo que hace que la opción sea más simple y ordenada.
+
+## Codificación Visual mediante el Componente visualMap
+
+El [visualMap component](${optionPath}visualMap) permite configurar la regla que mapea un valor a un canal visual (color, tamaño, ...). Puedes encontrar más detalles en [Visual Map of Data](${lang}/concepts/visual-map/).
diff --git a/contents/es/concepts/tooltip.md b/contents/es/concepts/tooltip.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/contents/es/concepts/visual-map.md b/contents/es/concepts/visual-map.md
new file mode 100644
index 000000000..888326fe7
--- /dev/null
+++ b/contents/es/concepts/visual-map.md
@@ -0,0 +1,137 @@
+# Mapa Visual de Datos
+
+La visualización de datos es un proceso de mapeo de datos en elementos visuales. Este procedimiento también puede llamarse codificación visual, y los elementos visuales también pueden llamarse canales visuales.
+
+Cada tipo de gráfico en Apache EChartsTM tiene este procedimiento de mapeo incorporado. Por ejemplo, el gráfico de líneas mapea los datos en líneas, el gráfico de barras mapea los datos en altura. Algunos gráficos más complicados, como `graph`, `themeRiver`, y `treemap` , tienen su propio mapeo incorporado.
+
+Además, ECharts proporciona el [visualMap component](${optionPath}visualMap) para mapeo visual general. Los elementos visuales permitidos en el componente `visualMap` son:
+
+- `symbol`, `symbolSize`
+- `color`, `opacity`, `colorAlpha`,
+- `colorLightness`, `colorSaturation`, `colorHue`
+
+A continuación, vamos a presentar cómo usar el componente `visualMap`.
+
+## Datos y Dimensiones
+
+Los datos suelen almacenarse en [series.data](${optionPath}series.data) en ECharts. Dependiendo del tipo de gráfico, como lista, árbol, gráfico, etc., la forma de los datos puede variar. Pero tienen una característica común: son una colección de elementos de datos. Cada elemento de datos contiene un valor de datos y otra información si es necesario. Cada valor de datos puede ser un valor único (una dimensión) o un arreglo (varias dimensiones).
+
+Por ejemplo, [series.data](${optionPath}series.data) es la forma más común, que es una `list`, un arreglo común:
+
+```js
+series: {
+ data: [
+ {
+ // every item here is a dataItem
+ value: 2323, // this is data value
+ itemStyle: {}
+ },
+ 1212, // it can also be a value of dataItem, which is a more common case
+ 2323, // every data value here is one dimension
+ 4343,
+ 3434
+ ];
+}
+```
+
+```js
+series: {
+ data: [
+ {
+ // every item here is a dataItem
+ value: [3434, 129, 'San Marino'], // this is data value
+ itemStyle: {}
+ },
+ [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
+ [2323, 3223, 'Nauru'], // every data value here is three dimension
+ [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
+ // the second dimension to y axis,
+ // and the third dimension to symbolSize
+ ];
+}
+```
+
+Normalmente, las primeras una o dos dimensiones se utilizan para el mapeo. Por ejemplo, mapear la primera dimensión al eje x, y la segunda dimensión al eje y. Si deseas representar más dimensiones,`visualMap` es lo que necesitas. Es probable que los [scatter charts](${optionPath}series-scatter) usen el radio para representar la tercera dimensión.
+
+## El Componente visualMap
+
+El componente visualMap define el mapeo de qué dimensión de los datos a qué elementos visuales.
+
+
+Los siguientes dos tipos de componentes visualMap están soportados, identificados con[visualMap.type](${optionPath}visualMap.type).
+
+Su estructura se define de la siguiente manera:
+
+```js
+option = {
+ visualMap: [
+ // can define multiple visualMap components at the same time
+ {
+ // the first visualMap component
+ type: 'continuous' // defined as continuous visualMap
+ // ...
+ },
+ {
+ // the second visualMap component
+ type: 'piecewise' // defined as discrete visualMap
+ // ...
+ }
+ ]
+ // ...
+};
+```
+
+## Componentes de Mapeo Visual Continuo y Discreto
+
+El componente de mapeo visual de ECharts se divide en continuo
+([visualMapContinuous](${optionPath}visualMap-continuous)) y discreto ([visualMapPiecewise](${optionPath}visualMap-piecewise)).
+
+Continuo significa que la dimensión de los datos para el mapeo visual es un valor continuo, mientras que discreto significa que los datos se dividen en múltiples segmentos o datos discretos.
+
+### Mapeo Visual Continuo
+
+El mapeo visual de tipo continuo puede determinar el rango del mapeo visual especificando los valores máximos y mínimos.
+
+```js
+option = {
+ visualMap: [
+ {
+ type: 'continuous',
+ min: 0,
+ max: 5000,
+ dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped
+ seriesIndex: 4, // The fourth series is mapped.
+ inRange: {
+ // The visual configuration in the selected range
+ color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping
+ // the minimum value of the data is mapped to 'blue', and
+ // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.
+ // The rest is automatically calculated linearly.
+ symbolSize: [30, 100] // Defines the mapping range for the graphic size.
+ // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.
+ // The maximum value is mapped to 100.
+ // The rest is calculated linearly automatically.
+ },
+ outOfRange: {
+ // Check the out of range visual configuration
+ symbolSize: [30, 100]
+ }
+ }
+ // ...
+ ]
+};
+```
+
+donde [visualMap.inRange](${optionPath}visualMap.inRange) indica el estilo utilizado para los datos dentro del rango de mapeo de datos; mientras que [visualMap.outOfRange](${optionPath}visualMap.outOfRange) especifica el estilo para los datos fuera del rango de mapeo.
+
+[visualMap.dimension](~visualMap.dimension) especifica qué dimensión de los datos será mapeada visualmente.
+
+### Mapeo Visual por Segmentos
+
+El componente de mapeo visual por segmentos tiene tres modos.
+
+- Segmentación promedio de datos continuos: basada en [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) para dividir automáticamente los datos en partes iguales.
+- Segmentación personalizada de datos continuos: define el rango de cada parte basado en [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces).
+- Datos discretos (datos categóricos): las categorías se definen en [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories).
+
+Para utilizar un mapa visual segmentado, debes configurar `type` a `'piecewise'` y elegir uno de los tres elementos de configuración mencionados.
diff --git a/contents/es/get-started.md b/contents/es/get-started.md
new file mode 100644
index 000000000..67f1e265b
--- /dev/null
+++ b/contents/es/get-started.md
@@ -0,0 +1,91 @@
+# Empezando
+
+## Obtener Apache Echarts
+
+Apache Echarts soporta varios metodos de descarga, los cuales se explican
+con mas detalles en el siguiente tutorial [Installation](${lang}/basics/download).
+Aqui, tomamos el ejemplo de obtenerlo desde el CDN desde [jsDelivr](https://www.jsdelivr.com/package/npm/echarts)
+y explicamos como instalarlo rapidamente.
+
+En [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) selecciona `dist/echarts.js`, haz click y guarda el archivo como `echarts.js` file.
+
+> Mas Informacion sobre estos archivos se puede encontrar en el siguiente tutorial [Installation](${lang}/basics/download).
+
+## Incluir Echarts
+
+Crea un nuevo archivo `index.html` en el directorio donde guardaste el archivo `echarts.js`, con el siguiente contenido:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+Cuando abras este `index.html`, veras una pagina vacia. pero no te preocupes. Abre la consoloa y asegurate de que no se reporte ningun, mensaje de error, luego puedes proceder al siguiente paso.
+
+## Dibuja un grafico Simple
+
+Antes de Dibujar, necesitamos preparar un contenedor DOM para Echarts con una altura y un ancho definidos. Agregar el siguiente codigo despues de la etiqueta que introdujiste anteriormente.
+
+```html
+
+
+
+
+```
+
+Luego, puedes inicializar una instancia de Echarts con el metodo [echarts.init](${mainSitePath}api.html#echarts.init) y establecer la instancia de Echarts con el Metodo [setOption](${mainSitePath}api.html#echartsInstance.setOption) para generar un grafico de barras simple. Aqui tienes el codigo completo.
+
+```html
+
+
+
+
+ Vector SVG images are not blurred;
Support for initial animation | +| Server-Side Canvas Rendering | Image | The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG | + +En general, se debe preferir la solución de renderizado SVG del lado del servidor, o si SVG no es aplicable, se puede considerar la solución de renderizado en Canvas. + +El renderizado del lado del servidor también tiene algunas limitaciones, especialmente en lo que respecta a interacciones que no pueden ser soportadas. Por lo tanto, si tienes requisitos de interacción, puedes consultar la sección "Renderizado del lado del servidor con hidratación" a continuación. + +## Renderizado del lado del servidor + + +### Renderizado del lado del servidor en SVG + +> Actualización de versión: + +> +> - 5.3.0: Introducción de una nueva solución de renderizado basada en cadenas SVG sin dependencias y soporte para animaciones iniciales. +> - 5.5.0: Se añadió un entorno de ejecución ligero en el cliente, que permite algunas interacciones sin necesidad de cargar el ECharts completo en el cliente. + +Introdujimos una nueva solución de renderizado del lado del servidor basada en cadenas SVG sin dependencias en la versión 5.3.0. + +```ts +// Server-side code +const echarts = require('echarts'); + +// In SSR mode the first container parameter is not required +let chart = echarts.init(null, null, { + renderer: 'svg', // must use SVG rendering mode + ssr: true, // enable SSR + width: 400, // need to specify height and width + height: 300 +}); + +// use setOption as normal +chart.setOption({ + //... +}); + +// Output a string +const svgStr = chart.renderToSVGString(); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; +``` + +La estructura general del código es casi la misma que en el navegador, comenzando con `init` para inicializar un gráfico de ejemplo y luego configurando los elementos del gráfico mediante `setOption`. Sin embargo, los parámetros pasados a `init` serán diferentes a los utilizados en el navegador. + +- En primer lugar, dado que el SVG renderizado en el lado del servidor es basado en cadenas, no necesitamos un contenedor para mostrar el contenido renderizado, por lo que podemos pasar `null` o `undefined` como primer `container` parametro de `init`. +- Luego, en el tercer parámetro de `init` debemos indicarle a ECharts que habilite el modo de renderizado del lado del servidor especificando `ssr: true`.De esta manera, ECharts sabrá que debe desactivar el bucle de animación y los módulos de eventos. +- También debemos especificar la `height` y `width` del gráfico, por lo que si el tamaño del gráfico debe ser sensible al contenedor, es posible que debas pensar si el renderizado del lado del servidor es adecuado para tu escenario. + +En el navegador, ECharts renderiza automáticamente el resultado en la página después de `setOption` y luego determina en cada cuadro si hay una animación que necesita ser redibujada, pero en Node.js no hacemos esto después de establecer `ssr: true`. En su lugar, usamos `renderToSVGString` para renderizar el gráfico actual como una cadena SVG, que luego puede ser devuelta al frontend mediante la respuesta HTTP o guardada en un archivo local. + +Respuesta al navegador (usando Express.js como ejemplo): + +```ts +res.writeHead(200, { + 'Content-Type': 'application/xml' +}); +res.write(svgStr); // svgStr is the result of chart.renderToSVGString() +res.end(); +``` + +Or save to a local file + +```ts +fs.writeFile('bar.svg', svgStr, 'utf-8'); +``` + +#### Animaciones en el renderizado del lado del servidor + +Como puedes ver en el ejemplo anterior, incluso con el renderizado del lado del servidor, ECharts aún puede proporcionar efectos de animación, que se logran insertando animaciones CSS en la cadena SVG de salida. No se necesita JavaScript adicional para ejecutar la animación. + +Sin embargo, las limitaciones de las animaciones CSS impiden implementar animaciones más flexibles en el renderizado del lado del servidor, como animaciones de gráficos de barras en carrera, animaciones de etiquetas y efectos especiales en la serie `lines` La animación de algunas series, como `pie`, ha sido optimizada específicamente para el renderizado del lado del servidor. + + +Si no deseas esta animación, puedes desactivarla configurando`animation: false` al utilizar `setOption`. + +```ts +setOption({ + animation: false +}); +``` + +### Renderizado del lado del servidor en Canvas + +Si deseas que la salida sea una imagen en lugar de una cadena SVG, o si estás utilizando una versión más antigua, te recomendamos usar [node-canvas](https://github.com/Automattic/node-canvas) para el renderizado del lado del servidor.[node-canvas](https://github.com/Automattic/node-canvas) es una implementación de Canvas en Node.js que proporciona una interfaz casi idéntica a la de Canvas en el navegador. + +Aquí tienes un ejemplo simple: + +```ts +var echarts = require('echarts'); +const { createCanvas } = require('canvas'); + +// In versions earlier than 5.3.0, you had to register the canvas factory with setCanvasCreator. +// Not necessary since 5.3.0 +echarts.setCanvasCreator(() => { + return createCanvas(); +}); + +const canvas = createCanvas(800, 600); +// ECharts can use the Canvas instance created by node-canvas as a container directly +let chart = echarts.init(canvas); + +// setOption as normal +chart.setOption({ + //... +}); + +const buffer = renderChart().toBuffer('image/png'); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; + +// Output the PNG image via Response +res.writeHead(200, { + 'Content-Type': 'image/png' +}); +res.write(buffer); +res.end(); +``` + +#### Carga de imágenes + +[node-canvas](https://github.com/Automattic/node-canvas) proporciona una implementación de `Image` para la carga de imágenes. Si utilizas imágenes en tu código, podemos adaptarlas utilizando la interfaz `setPlatformAPI` que se introdujo en la versión `5.3.0`. + +```ts +echarts.setPlatformAPI({ + // Same with the old setCanvasCreator + createCanvas() { + return createCanvas(); + }, + loadImage(src, onload, onerror) { + const img = new Image(); + // must be bound to this context. + img.onload = onload.bind(img); + img.onerror = onerror.bind(img); + img.src = src; + return img; + } +}); +``` +Si está utilizando imágenes de forma remota, le recomendamos que prefetch la imagen a través de una petición http para obtener `base64` antes de pasarlo como la URL de la imagen, para asegurarse de que la imagen se carga cuando se renderiza. + + +## Hidratación del cliente + +### Carga diferida de ECharts completa + +Con la última versión de ECharts, la solución de renderizado del lado del servidor puede hacer lo siguiente al renderizar el gráfico: + +- Soporte para la animación inicial (es decir, la animación que se reproduce cuando el gráfico se renderiza por primera vez). +- Estilos de resaltado (es decir, el efecto de resaltado cuando el mouse pasa sobre una barra en un gráfico de barras). + +Pero hay características que no pueden ser soportadas por el renderizado del lado del servidor: + +- Cambio dinámico de datos +- Hacer clic en una leyenda para alternar si la serie se muestra o no +- Mover el mouse para mostrar un tooltip +- Otras características relacionadas con la interacción + +Si tienes tales requisitos, puedes considerar usar renderizado del lado del servidor para generar rápidamente el gráfico en la primera pantalla, luego esperar a que `echarts.js` termine de cargarse y volver a renderizar el mismo gráfico en el lado del cliente, para que puedas lograr efectos de interacción normales y cambiar los datos dinámicamente. Ten en cuenta que al renderizar en el lado del cliente, debes activar los componentes interactivos como `tooltip: { show: true }` y desactivar la animación inicial con `animation: 0` (la animación inicial debe ser realizada por la animación SVG del resultado renderizado en el servidor). + +Como se puede ver, desde el punto de vista de la experiencia del usuario, casi no hay un proceso de renderizado secundario, y el efecto de cambio es muy fluido. También puedes usar una biblioteca como [pace-js](https://www.npmjs.com/package/pace-js) para mostrar una barra de progreso de carga durante la carga de `echarts.js` como en el ejemplo anterior, para resolver el problema de la falta de retroalimentación interactiva antes de que los ECharts estén completamente cargados. + +Usar renderizado del lado del servidor con renderizado del lado del cliente y carga diferida de `echarts.js` en el lado del cliente es una buena solución para escenarios en los que se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. Sin embargo, toma algo de tiempo cargar `echarts.js` y, antes de que se cargue completamente, no hay retroalimentación interactiva, por lo que se podría mostrar un texto de "Cargando" al usuario. Esta es una solución comúnmente recomendada para escenarios donde se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. + +### Tiempo de ejecución ligero en el cliente + +La solución A proporciona una forma de implementar interacciones completas, pero en algunos escenarios, no necesitamos interacciones complejas, solo esperamos poder realizar algunas interacciones simples en el cliente basadas en el renderizado del lado del servidor, como: hacer clic en la leyenda para alternar si la serie se muestra. En este caso, ¿podemos evitar cargar al menos unos cientos de KBs del código de ECharts en el cliente? + +A partir de la versión v5.5.0, si el gráfico solo necesita los siguientes efectos e interacciones, se puede lograr mediante el renderizado SVG del lado del servidor + tiempo de ejecución ligero en el cliente: + +- Animación inicial del gráfico (principio de implementación: el SVG renderizado por el servidor incluye animación CSS). +- Estilo de resaltado (principio de implementación: el SVG renderizado por el servidor incluye animación CSS) +- Cambio dinámico de datos (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). +- Hacer clic en la leyenda para alternar si la serie se muestra (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). + +```html + + + + +``` + +El servidor realiza el renderizado secundario basado en la información pasada por el cliente sobre si cada serie se muestra (`isSeriesShown`) y devuelve una nueva cadena SVG. El código del lado del servidor [is the same as above](#server-side-svg-rendering), por lo que no se repetirá. + +> Acerca del registro del estado: En comparación con el renderizado puramente del lado del cliente, los desarrolladores deben registrar y mantener información adicional (como si cada serie se muestra en este ejemplo). Esto es inevitable porque las solicitudes HTTP son sin estado. Si quieres implementar un estado, o el cliente lo registra y lo pasa como en el ejemplo anterior, o el servidor mantiene el estado (por ejemplo, a través de una sesión, pero esto requiere más memoria del servidor y una lógica de destrucción más compleja, por lo que no se recomienda). + +Usar renderizado SVG del lado del servidor más tiempo de ejecución ligero del lado del cliente tiene la ventaja de que el cliente ya no necesita cargar cientos de KBs del código de ECharts, solo necesita cargar un código de tiempo de ejecución ligero de menos de 4 KB; y desde la experiencia del usuario, se pierde muy poco (admite animación inicial, resaltado al pasar el mouse). La desventaja es que requiere un costo de desarrollo para mantener información de estado adicional y no admite interacciones con requisitos de tiempo real muy altos (como mostrar tooltips al mover el mouse). En general, **se recomienda usarlo en entornos con requisitos muy estrictos para el volumen de código.**. + +## Usando Tiempo de Ejecución Ligero + +El tiempo de ejecución ligero en el cliente permite la interacción con los gráficos SVG renderizados por el servidor al comprender el contenido. + +El tiempo de ejecución ligero en el cliente se puede importar de las siguientes maneras: + +```html + + + + +``` + +### API + +Las siguientes APIs se proporcionan en la variable global `window['echarts-ssr-client']`: + +#### hydrate(dom: HTMLElement, options: ECSSRClientOptions) + +- `dom`: El contenedor del gráfico, cuyo contenido debe establecerse como el gráfico SVG renderizado por el servidor antes de llamar a este método. +- `options`: Elementos de configuración + +##### ECSSRClientOptions + +```ts +on?: { + mouseover?: (params: ECSSRClientEventParams) => void, + mouseout?: (params: ECSSRClientEventParams) => void, + click?: (params: ECSSRClientEventParams) => void +} +``` + +Al igual que los [chart mouse events](${mainSitePath}api.html#events.Mouse%20events), los eventos aquí son para los elementos del gráfico (por ejemplo, las barras de un gráfico de barras, el ítem de datos de un gráfico de líneas, etc.), no para el contenedor del gráfico. + +##### ECSSRClientEventParams + +```ts +{ + type: 'mouseover' | 'mouseout' | 'click'; + ssrType: 'legend' | 'chart'; + seriesIndex?: number; + dataIndex?: number; + event: Event; +} +``` + +- `type`: Event type +- `ssrType`: Event object type, `legend` represents legend data, `chart` represents chart data object +- `seriesIndex`: Series index +- `dataIndex`: Data index +- `event`: Native event object + +### Ejemplo + +Ver la sección de "Tiempo de ejecución ligero en el cliente" anterior. + +## Resumen + +Arriba, hemos introducido varias soluciones de renderizado diferentes, incluyendo: + +- Client-side rendering +- Server-side SVG rendering +- Server-side Canvas rendering +- Client-side lightweight runtime rendering + +These four rendering methods can be used in combination. Let's summarize their respective applicable scenarios: + +| Rendering Solution | Loading Volume | Loss of Function and Interaction | Relative Development Workload | Recommended Scenario | +| --- | --- | --- | --- | --- | +| Client-side rendering | Largest | None | Minimum | The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction | +| Client-side rendering ([partial package importing](${lang}/basics/import#shrinking-bundle-size) on demand) | Large | Large: the packages not included cannot use the corresponding functions | Small | The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources | +| One-time server-side SVG rendering | Small | Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction | +| One-time server-side Canvas rendering | Large | Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG | +| Server-side SVG rendering plus client-side ECharts lazy loading | Small, then large | Medium: cannot interact before lazy loading is completed | Medium | The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading | +| Server-side SVG rendering plus client-side lightweight runtime | Small | Medium: Cannot implement interactions with high real-time requirements | Large (need to maintain chart status, define client-server interface protocol) | The first screen load time is sensitive, low demand for complete functionality and interaction, very strict requirements for code volume, not strict requirements for interaction real-time | +| Server-side SVG rendering plus client-side ECharts lazy loading, using lightweight runtime before lazy loading is completed | Small, then large | Small: Cannot perform complex interactions before lazy loading is completed | Largest | The first screen load time is sensitive, high demand for complete functionality and interaction, sufficient development time | + + +Por supuesto, existen otras posibilidades de combinación, pero las más comunes son las anteriores. Creo que si entiendes las características de estas soluciones de renderizado, podrás elegir la solución adecuada en función de tu propio escenario. \ No newline at end of file diff --git a/contents/es/how-to/data/drilldown.md b/contents/es/how-to/data/drilldown.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/how-to/data/dynamic-data.md b/contents/es/how-to/data/dynamic-data.md new file mode 100644 index 000000000..d727263b0 --- /dev/null +++ b/contents/es/how-to/data/dynamic-data.md @@ -0,0 +1,114 @@ +# Carga Asíncrona de Datos y Actualización Dinámica + +## Carga Asíncrona + +En el [Getting Started Example](${lang}/get-started) los datos se actualizan directamente usando `setOption`. Pero en muchos casos, los datos necesitan ser llenados mediante carga asíncrona de manera frecuente. `ECharts` puede implementar la carga asíncrona de manera sencilla. Puedes obtener los datos de manera asíncrona a través de una función como jQuery y usar `setOption` para llenar los datos y configuraciones después de que el gráfico haya sido inicializado. + +```js +var myChart = echarts.init(document.getElementById('main')); + +$.get('data.json').done(function(data) { + // Structure of data: + // { + // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"], + // values: [5, 20, 36, 10, 10, 20] + // } + myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: {}, + xAxis: { + data: data.categories + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: data.values + } + ] + }); +}); +``` + +O mostrar los ejes vacíos con todos los estilos definidos antes de llenar los datos: + +```js +var myChart = echarts.init(document.getElementById('main')); +// Show title, legends and empty axes +myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: { + data: ['Sales'] + }, + xAxis: { + data: [] + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: [] + } + ] +}); + +// Asynchronous Data Loading +$.get('data.json').done(function(data) { + // Fill in the data + myChart.setOption({ + xAxis: { + data: data.categories + }, + series: [ + { + // Find series by name + name: 'Sales', + data: data.data + } + ] + }); +}); +``` + +Por ejemplo: + +
Y: ' + + params.data[1].toFixed(2) + ); + } + } +}); +``` + +```js +myChart.setOption({ + graphic: data.map(function(item, dataIndex) { + return { + type: 'circle', + // ..., + // Customize "show/hide rule", show when mouse over, hide when mouse out. + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex) + }; + }) +}); + +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} + +function hideTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'hideTip' + }); +} +``` + +Se utiliza la API [dispatchAction](${mainSitePath}/api.html#echartsInstance.dispatchAction) para mostrar/ocultar el contenido del tooltip, donde se despachan las acciones [showTip](${mainSitePath}/api.html#action.tooltip.showTip) y [hideTip](api.html#action.tooltip.hideTip) is dispatched. + +## Código Completo + +El código completo es el siguiente: + +```js +import echarts from 'echarts'; + +var symbolSize = 20; +var data = [ + [15, 0], + [-50, 10], + [-56.5, 20], + [-46.5, 30], + [-22.1, 40] +]; +var myChart = echarts.init(document.getElementById('main')); +myChart.setOption({ + tooltip: { + triggerOn: 'none', + formatter: function(params) { + return ( + 'X: ' + + params.data[0].toFixed(2) + + '
Y: ' + + params.data[1].toFixed(2) + ); + } + }, + xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } }, + yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } }, + series: [ + { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data } + ] +}); +myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { + type: 'circle', + position: myChart.convertToPixel('grid', item), + shape: { r: symbolSize / 2 }, + invisible: true, + draggable: true, + ondrag: echarts.util.curry(onPointDragging, dataIndex), + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex), + z: 100 + }; + }) +}); +window.addEventListener('resize', function() { + myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { position: myChart.convertToPixel('grid', item) }; + }) + }); +}); +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} +function hideTooltip(dataIndex) { + myChart.dispatchAction({ type: 'hideTip' }); +} +function onPointDragging(dataIndex, dx, dy) { + data[dataIndex] = myChart.convertFromPixel('grid', this.position); + myChart.setOption({ + series: [ + { + id: 'a', + data: data + } + ] + }); +} +``` + +Con los conocimientos introducidos anteriormente, se pueden implementar más características. Por ejemplo, se puede agregar un [dataZoom component](${optionPath}dataZoom) para cooperar con el sistema cartesiano, o crear una pizarra de gráficos sobre sistemas de coordenadas. ¡Usa tu imaginación! \ No newline at end of file diff --git a/contents/es/how-to/label/rich-text.md b/contents/es/how-to/label/rich-text.md new file mode 100644 index 000000000..0018b4369 --- /dev/null +++ b/contents/es/how-to/label/rich-text.md @@ -0,0 +1,502 @@ +# Texto Enriquecido + +El texto enriquecido se puede utilizar en las etiquetas de las series, ejes u otros componentes de Apache ECharts™ desde la versión 3.7. Esta característica admite: + +- Estilos de caja (fondo, borde, sombra, etc.), rotación y posición de un bloque de texto pueden especificarse. +- Se pueden personalizar estilos (color, fuente, ancho/alto, fondo, sombra, etc.) y alineación en fragmentos de texto. +- Se pueden usar imágenes en el texto como íconos o fondo. +- Combinando estas configuraciones, se pueden crear efectos especiales, como tablas simples o reglas horizontales (hr). + +Al principio, es importante aclarar los significados de dos términos que se utilizarán a continuación: + +- Text Block: Todo el bloque de texto de la etiqueta. +- Text fragment: Una parte del texto en un bloque de texto. + +Por ejemplo: + +
+```
+
+## Añadir un ejemplo de Iframe
+
+`src` es la cadena que sigue a `?c=` en la direccion https://echarts.apache.org/examples/en/editor.html?c=line-simple address
+
+Uso:
+
+```markdown
+
+
中文
English
+ Español
diff --git a/store/index.js b/store/index.js
index 2594e1359..1cd1a72b4 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,6 +1,8 @@
import zhPosts from '~/contents/zh/posts.yml'
import enPosts from '~/contents/en/posts.yml'
+import esPosts from '~/contents/es/posts.yml'
import config from '~/configs/config'
+import { effectScope } from '@vue/composition-api'
export const state = () => ({
filled: false,
@@ -12,7 +14,8 @@ export const state = () => ({
focusMode: false,
posts: {
zh: zhPosts,
- en: enPosts
+ en: enPosts,
+ es: esPosts
},
config: config
})