Configuración de estilos de ECharts
ECharts puede cambiar el color, el brillo, el tamaño, etc. de los elementos gráficos o del texto mediante la configuración de estilos.
Tema de colores
Desde ECharts 4, además del tema predeterminado, hay dos temas integrados, que son:lightydark。
La forma de uso es la siguiente:
Además, también podemos en eleditor de temas oficialelegir y descargar el tema que más nos guste.
Actualmente, la descarga del tema ofrece versiones en JS y JSON.
Si usas la versión JS, puedes guardar el código del tema JS como unnombre-tema.jsarchivo, y luego haz referencia a ese archivo en el HTML y, por último, usa ese tema en el código.
Por ejemplo, si en la imagen de arriba hemos seleccionado un tema, guarda el código JS comowonderland.js。
Ejemplo
<script src="https://www.example.com/static/js/wonderland.js"></script>
...
//Después de que el HTML importe el archivo wonderland.js, invócalo al inicializar.
var myChart = echarts.init(dom, 'wonderland');
// ...
Pruébalo »
Si el tema se guarda como un archivo JSON, puedes cargarlo y registrarlo tú mismo.
Por ejemplo, si en la imagen de arriba hemos seleccionado un tema, guarda el código JSON comowonderland.json。
Ejemplo
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
Pruébalo »
Nota:Hemos usado $.getJSON, por lo que necesitamos importar jQuery.
Paleta de colores
La paleta de colores se puede configurar en option.
La paleta de colores ofrece un conjunto de colores; los gráficos y las series seleccionarán automáticamente colores de ella.
Se puede configurar una paleta global, o una paleta específica para cada serie.
// Paleta global.
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// Paleta propia de esta serie.
color: ['#dd6b66','#759aa0','#e69d87','#6A96C1','#ea7e53','#eedd78','#5B80A6','#73b9bc','#7289ab', '#6F9DCA','#f49f42'],
...
}, {
type: 'pie',
// Paleta propia de esta serie.
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
Ejemplo de paleta global:
Ejemplo
color: ['#ff0000','#0080FF', '#0000ff', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
Pruébalo »
Ejemplo de paleta de serie:
Ejemplo
type: 'pie',
// Paleta propia de esta serie.
color: ['#ff0000','#0080FF', '#0000ff', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
Pruébalo »
Configuración directa de estilos itemStyle, lineStyle, areaStyle, label, ...
La configuración directa de estilos es un método de configuración bastante común. En la documentación de EChartsoptionhay muchos lugares donde se pueden configuraritemStyle、lineStyle、areaStyle、labeletc. En estos lugares se pueden configurar directamente el color de los elementos gráficos, el ancho de línea, el tamaño de los puntos, el texto de las etiquetas, el estilo de las etiquetas, etc.
En general, las diversas series y componentes de ECharts siguen estos hábitos de nomenclatura, aunque en diferentes gráficos y componentes,itemStyle、labeletc. pueden aparecer en diferentes lugares.
Para otra introducción sobre la configuración directa de estilos, consultaGráfico de pastel de ECharts。
Estilos de resaltado: emphasis
Al pasar el mouse sobre un elemento gráfico, generalmente aparece un estilo resaltado. Por defecto, el estilo resaltado se genera automáticamente a partir del estilo normal.
Si deseas personalizar el estilo resaltado, puedes hacerlo mediante la propiedad emphasis:
Ejemplo
emphasis: {
itemStyle: {
// El color del punto al resaltar
color: 'red'
},
label: {
show: true,
// El texto de la etiqueta al resaltar
formatter: 'Contenido de la etiqueta mostrado al resaltar'
}
},
Pruébalo »