1. Muestra el código principal del control deslizante.
dataZoom:[
{
type: "slider", // slider significa que hay un bloque deslizante,
show: true,
xAxisIndex: [0], // significa inicio de plegado del eje x
: 1, // el porcentaje inicial de la ventana de datos rango, representa 1%
final: 100, // El porcentaje final del rango de la ventana de datos, que indica 35% de la coordenada
inferior: "20",
},
],
2. Visualización de inclinación de fuente en el eje X
axisLabel: {
color: "#999", //
Intervalo de color de fuente del eje X: 0, // Representa la visualización de todas las etiquetas del eje X,
rotar: 40,
textStyle: {
fontSize: 16,
},
3. Código completo
Llame a this.leftCharts(listx,listy) para pasar parámetros
//Gráfico de barras
leftCharts(allArr, titleArr) {
var
option = {
backgroundColor: "#08173600",
información sobre herramientas: {
trigger: "axis",
axisPointer: {
type: " sombra",
},
},
dataZoom:[
{
tipo: "control deslizante", // control deslizante significa que hay un bloque deslizante,
mostrar: verdadero, xAxisIndex: [0], // significa
inicio
de plegado del eje x : 1, // ventana de datos El porcentaje inicial del rango, que indica 1%
end:100, //El porcentaje final del rango de la ventana de datos, que indica el 35% de la coordenada
inferior: "20",
},
],
grid: {
left: '18%',
bottom:'38%'
},
yAxis: {
type: "value", //tipo de eje de coordenadas del eje
y splitLine
: {
show: true, //si mostrar la y -axis axis
lineStyle: {
color: "#ccc", //El color del ancho del eje y
: '1.5', //El ancho del tipo de línea del eje y
: "discontinuo", //sólido sólido línea/línea punteada línea punteada/línea discontinua
},
} ,
axisLine: {
// eje de coordenadas del eje y
show: false,
lineStyle: {
color: "#009dff",
},
},
ejeTick: {
show: false,
},
axisLabel: {
color: "#999", //color del texto de la marca de verificación del eje y
fontSize: '16', //tamaño del texto de la marca de verificación del eje y
},
},
xAxis: {
tipo: "categoría", //x -coordenada del eje
Datos de tipo de eje: titleArr,
axisLine: { show: false, //Si se muestra la
línea
del eje xStyle : {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel : {
color: "# 999", //Intervalo de color de fuente del eje X
:0, //Representa la visualización de todas las etiquetas del eje X
la rotación de visualización:40,
textStyle: {
fontSize: 16,
if (paramsNameNumber > provideNumber) {
/** Recorre cada fila, p representa la fila*/
for (var p = 0; p < rowNumber; p++) {
},
formateador: function (params) {
var newParamsName = ""; // La cadena concatenada final
var paramsNameNumber = params.length; // El número real de etiquetas
var provideNumber = 7; // Las palabras que se pueden mostrar en cada una line El número de
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // Si desea ajustar la línea, cuántas líneas deben mostrarse y redondearse hacia arriba /** *
Determine
si el número de etiquetas es mayor que el número especificado. Si es mayor, ajuste la línea Si el procesamiento no es mayor que, es decir, igual o menor que, devuelva la etiqueta original */ // La condición
es
equivalente a RowNumber>1
var tempStr = ""; // Indica la cadena interceptada cada vez
var start = p * provideNumber; // La posición donde comienza la intercepción
var end = start + provideNumber; // La posición donde termina la intercepción
// Procesamiento especial de la última línea aquí Valor de índice
if (p == número de fila - 1) {
// Sin salto de línea la última vez
tempStr = params.substring(start, paramsNameNumber);
} else {
// Concatena cadenas y rompe línea cada vez
tempStr = params.substring (inicio, fin) + "\n";
}
newParamsName += tempStr; // La cadena final
}
} else {
// Asigna el valor de la etiqueta antigua a la nueva etiqueta
newParamsName = params;
}
// Devuelve la cadena final
return newParamsName;
},
},
},
offset: 0,
series: [
{
nombre: "revisado",
tipo: "barra",
barWidth: 12,
barGap: "80%",
datos: allArr,
itemStyle: {
color: {
tipo: "lineal",
x: 0,
y: 1,
x2: 0 ,
y2: 0,
colorStops: [
{
color: "rgb(0,101,255)", // Color al 0%
},
{
offset: 1,
color: "rgb(0,101,255)", // Color al 100%
} ,
],
global: false, // El valor predeterminado es false
} ,
normal: {
//El título encima de la
etiqueta del gráfico de barras: {
show: false, //El número encima de la
posición del gráfico de barras: "top",
textStyle: {
color: "#000",
fontSize: 10,
},
},
// barBorderRadius: [24, 24, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//颜色渐变
{
desplazamiento: 0,
color: "rgb(0,101,255)",
},
// {
// desplazamiento: 0,5,
// color : "#00b1f2",
// },
{
desplazamiento: 1,
color: "rgb(0,101,255)",
},
]),
},
},
},
],
};
var myChart = echarts.init(this.$refs.leftCharts);
myChart.setOption(opción);
ventana.onresize = función () {
myChart.resize();
}
}
El efecto es como se muestra en la figura:
por fin
Gracias por leer. Si tiene alguna deficiencia, ¡no dude en comentarla en el área de comentarios!