Quiero formatear la etiqueta del eje de mi gráfico con Echarts, la fecha del formateador del fin de semana en negrita, probé este código pero no sé por qué no funciona:
xAxis: [{ type: 'category', data: day, inverse: false, splitArea: { show: true }, axisLabel: { textStyle: { color: function (value, index) { var d = moment(value).weekday(), index; return (d == 0 || d == 6) ? 'red' : 'black'; } }, formatter: (function(value, index){ var m = moment(value).format("DD/MM"), index; return m; }), fontWeight: function (value, index) { var n = moment(value).weekday(), index; return (n == 0 || n == 6) ? 'bold' : 'normal'; } }, }]Cualquier ayuda por favor!!!
No estoy seguro de si todavía está buscando una respuesta, pero encontré su pregunta mientras intentaba encontrar la solución al mismo problema, así que aquí va para la posteridad.
¿Por qué su xAxis es una matriz y no un objeto? Creo que tienes un par extra de corchetes allí. No sé qué versión de echarts está tratando de usar, pero estoy usando echarts v5.3 (la última en el momento de esta publicación).
Para dar formato a axisLabel , debe combinar axisLabel.formatter con axisLabel.rich . axisLabel.rich es donde define los estilos que desea usar para formatear usando estilos de texto enriquecido. formatter es la función en la que obtiene acceso al parámetro de value , que luego puede verificar para elegir un estilo de la lista condicionalmente. axisLabel.fontWeight no acepta una función, por lo que no puede verificar el value de la forma en que está tratando de hacerlo.
En el siguiente código de ejemplo, estoy creando dos estilos de texto enriquecido. Uno se llama a (parece ser la convención de echarts para usar letras individuales), lo que pondrá el texto en negrita. En la función del formateador, verifico si el valor es "sábado" o "domingo", y si lo es, devuelvo el valor formateado. El otro estilo de texto enriquecido que estoy definiendo se llama myDudes , que solo se aplica cuando el valor es "Miércoles". myDudes cambia fontWeight a negrita y cambia el color del texto a un bonito verde rana. En todos los demás casos, la función del formateador devolverá el valor sin cambios.
const echartsContainer = document.querySelector("#echarts-container"); const chart = echarts.init(echartsContainer); const option = { title: { text: "Happiness Level by Day of Week" }, tooltip: {}, xAxis: { data: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", ], axisLabel: { interval: 0, width: 90, overflow: "break", formatter: function (v) { if (v == "Sunday" || v == "Saturday") { return `{a|${v}}`; } if (v == "Wednesday") { return `{myDudes|${v}}`; } return v; }, rich: { a: { fontWeight: "bold", }, myDudes: { color: "#00AA33", fontWeight: "bold", }, }, }, }, yAxis: {}, series: [ { name: "Happiness level", type: "bar", data: [4, 5, { value: 10, itemStyle: { color: "#00AA33" } }, 6, 8, 9, 7], }, ], }; chart.setOption(option);Este es el resultado que obtengo:
