Tabla de contenido
- Conoce el gráfico de líneas
- Creación de gráfico de líneas
- Embellecimiento del gráfico de líneas
-
- Modificar el estilo de la polilínea
- Modificar el estilo del eje.
- Modificar el estilo de los puntos en el gráfico de líneas
- Establecer polilínea para suavizar la curva
- Establecer el área de color degradado
- Agregar una línea de marcador a un gráfico de líneas
- Agregar puntos de marcador al gráfico de líneas
- Interacción de gráfico de líneas
Conoce el gráfico de líneas
Un gráfico de líneas es un gráfico de visualización de datos de uso común, que generalmente se usa para mostrar tendencias de datos que cambian con el tiempo u otras variables continuas. Un gráfico de líneas consta de varias líneas que conectan puntos de datos y cada línea representa una serie de datos. El eje horizontal del gráfico de líneas generalmente representa el tiempo u otras variables continuas, y el eje vertical representa el valor de los datos, mostrando la tendencia y el cambio de los datos a través del cambio de la línea.
Los gráficos de líneas se pueden usar para mostrar varios tipos de datos, como precios de acciones, cambios de temperatura, cambios de ventas, etc. Los gráficos de líneas son simples, intuitivos, fáciles de entender y pueden mostrar tendencias de datos de manera efectiva. Son ampliamente utilizados en el análisis de datos, la toma de decisiones comerciales, la investigación científica y otros campos.
Creación de gráfico de líneas
La regla anterior, para usar el gráfico de líneas, primero debemos introducir Echarts
<template>
<div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {
ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
const myChart = echarts.init(chart.value)
const option = {
//配置项
}
myChart.setOption(option)
})
En el código anterior, primero introdujimos la biblioteca de Echarts a través importde la instrucción y luego mountedcreamos una instancia de Echarts en la función de enlace y la montamos en el elemento DOM especificado. Al mismo tiempo, se define un objeto de opción para almacenar elementos de configuración relacionados con Echarts; luego, podemos usar setOptionel método para configurar la instancia de Echarts, incluida la configuración del tipo de gráfico, datos, estilo, etc.
Configure el gráfico de líneas más simple: configure el siguiente código en el objeto de opción creado anteriormente
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
}
En el código anterior, hemos creado un gráfico de líneas con siete puntos de datos, donde el eje x representa el día de la semana y el eje y representa el valor de los datos. En el resumen del objeto de opción, establecemos el tipo del eje x en categorytipo categórico, y los datos son una matriz de texto del día de la semana; el tipo del eje y en value, es decir, el tipo numérico; el los datos del gráfico de líneas se establecen a través seriesdel atributo .
Luego, pase el objeto de opción como un parámetro a la instancia de myChart a través setOptiondel método , de modo que se complete un gráfico de líneas simple, actualice el navegador para ver el efecto.
Embellecimiento del gráfico de líneas
Modificar el estilo de la polilínea
Establecemos el estilo de la polilínea modificando lineStylelas propiedades , incluyendo color, ancho, estilo, etc. el código se muestra a continuación:
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
}
}]
Una vez completada la modificación, actualice el navegador para ver el efecto.
Modificar el estilo del eje.
Utilice axisLabellos axisLineatributos y para establecer la etiqueta del eje y el estilo de línea.
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
color: '#080b30', // 坐标轴标签颜色
fontSize: 12, // 坐标轴标签字号
},
axisLine: {
lineStyle: {
color: '#333' // 坐标轴线颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#080b30',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#333'
}
}
},
efecto modificado
Modificar el estilo de los puntos en el gráfico de líneas
Al modificar el valor del symbolatributo symbolSize, se puede cambiar la forma y el tamaño del punto. Modifique el color del punto y el estilo del borde a través de itemStylelos atributos .
symbolEl atributo se usa para especificar el tipo de gráfico del punto, como círculo, cuadrado, triángulo, etc., y symbolSizeel atributo se usa para especificar el tamaño del punto.
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
}
}]
Establecer polilínea para suavizar la curva
Controle la suavidad de la curva modificando el valor del smoothatributo .
Establecer el área de color degradado
Establezca el área debajo del gráfico de líneas configurando areaStyle. Establezca areaStyle en serie y especifique su opacidad, color, shadowBlur y otros atributos para controlar el efecto de visualización del área.
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}]
Agregar una línea de marcador a un gráfico de líneas
seriesEstablezca markLiney especifique sus data, symbol, y otros atributos para controlar el efecto de visualización de la línea del marcador symbolSize. Los tipos de etiquetas proporcionados son: , , , , , , ,label
symbolcirclerectroundRecttrianglediamondpinarrownone
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
}]
}
Agregar puntos de marcador al gráfico de líneas
seriesEstablezca markPointy especifique sus atributos data, symbol, y otros para controlar el efecto de visualización de los puntos de marcador symbolSize.label
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}],
symbol: 'circle',
symbolSize: 20,
label: {
show: true,
position: 'top',
formatter: '{b}: {c}'
}
}
}]
}
En el código anterior, el atributomarkPoint establece los datos del marcador, el atributo establece la forma del marcador, el atributo establece el tamaño del marcador y el atributo establece la etiqueta de texto del marcador. El contenido mostrado del texto del marcador se puede personalizar a través del atributo , donde representa el nombre del elemento de datos y representa el valor del elemento de datos.datasymbolsymbolSizelabelformatter{b}{c}
Interacción de gráfico de líneas
Agregar información sobre herramientas al pasar el mouse
Agregue sugerencias de desplazamiento del mouse al gráfico de líneas a través de tooltiplas propiedades, para que los usuarios puedan ver los datos de manera más conveniente.
tooltip: {
trigger: 'axis' // 触发方式为鼠标悬停
}
También podemos modificar el estilo de línea del objeto axisPointer en el elemento de configuración de información sobre herramientas para establecer el estilo de la línea de solicitud
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 0, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
Se agregó selección de rango de datos y zoom
Selección del área de datos:
agregue una barra de desplazamiento al gráfico de líneas dataZoomagregando un elemento de configuración y configurando el tipo enslider
dataZoom: {
type: 'slider', // 选择器类型为滑动条
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
El código anterior usa dataZoomel atributo para establecer el tipo de selección de área de datos como un control deslizante y las posiciones inicial y final del rango de selección predeterminado.
Escalado de datos:
el escalado de datos y la selección del área de datos son elementos de configuración agregados dataZoom, pero el tipo interno es diferente. Si está configurado en escalado de datos, establezca el contenido del tipo en inside, de modo que no haya barras de desplazamiento debajo del gráfico. Cuando el el mouse pasa sobre el gráfico Cuando está activado, desplace la rueda de desplazamiento para acercar y alejar el gráfico
dataZoom: {
type: 'inside', // 缩放类型为内置
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
Bueno, la introducción relevante sobre el gráfico de líneas está aquí primero. Los socios interesados pueden estudiarlo más profundamente. Todavía hay muchas funciones interesantes esperando que las desarrolles.