Descripción detallada de cómo vue.js encapsula echarts en componentes que se pueden usar con un solo clic.
Este artículo presenta principalmente el contenido relevante sobre el empaquetado de echarts de vue.js en componentes de un solo clic y lo comparte con todos para su referencia. Echemos un vistazo a la introducción detallada.
Explicación
Cuando trabaje en un proyecto, para que la visualización de los datos sea más intuitiva, utilice siempre controles relacionados con los gráficos. Hablando de controles de gráficos, por supuesto, primero pensaré en ECharts como un proyecto de código abierto, pero no es tan conveniente de usar como iview y element-ui, y requiere un pequeño grado de flexión. Para facilitar el diagrama, ECharts está encapsulado.
Demostración de control
Uso de control
Descripción general
Embalaje secundario basado en productos electrónicos
Impulsado por datos
Consulte src/components/charts para ver el código fuente del control.
Archivo
Accesorios
Atributos
Explicación
Tipo
_id
p>
El identificador único del gráfico. Si la identificación está duplicada, se informará un error.
Línea
_Texto del título
Título del gráfico
Línea
_xText
x -descripción del eje
Línea
_yText
descripción del eje y
Línea
_datos del gráfico
p>Datos del gráfico
Disposición
_Type
Hay tres tipos de gráficos (gráfico de líneas/gráfico de líneas/gráfico circular).
Ejemplo de llamada
& ltcharts
:_ id="'test charts'"
:_ title text="' Tráfico estadísticas'"
:_ xText="'Categoría'"
:_yText="Visitas totales"
:_ chart data="datos del gráfico "
:_ type="Pie""></chart>
//Datos de prueba de muestra]
Modo de implementación
p>Cree el dom a renderizar
& lttemplate>
& ltdiv:id="_id" class="chart">.
</div>
</template>
Función de dibujo
Función drawPie(datos del gráfico, id, titleText, xText, yText){
var chart = echarts.init(document.getelementbyid(id))
var xAxisData = chart data.map(function(item){ return item[0]})
var pieData =【】
datos del gráfico . foreach ((v, I) = >{
piedata . push ({
Nombre: v[ 0],
Valor: v[1]
})
})
setoption ({
título: {
texto: texto del título,
subtexto: '',
x: "centro"
} ,
Información sobre herramientas: {
Activador: "proyecto",
Formateador: "{ a } & ltbr />; { b }: { c } ( { d } %) "
},
Leyenda: {
Dirección: "Vertical",
Izquierda: "Izquierda" ,
Datos: xAxisData
},
Serie: [
{
Nombre: xText,
Tipo: "pie",
Radio: "55%",
Centro: ["50" %", "60%"],
Datos: pieData,
Estilo del elemento: {
Enfoque: {
Desenfoque de sombra:10,
shadowOffsetX : 0,
Color de sombra: "rgba (0, 0, 0, 0.5)"
}
}
}
]
})
}
Cuando se completa la carga y la fuente de datos cambia Redibujar
Observación : {
_ chartData(val) {
toggle(this._type) {
Caso "LineAndBar ":
drawline andbar (val, esto. _id, esto. _titleText, esto. _xTexto, esto. _yText);
Roto
Caso "LineOrBar":
drawLineOrBar(val, this._id, this._titleText, this._xText, this._ yText );
Roto
Caso "pie":
drawPie(val, this._id, this._titleText, this._xText, this._yText);
Roto
Valor predeterminado:
drawline andbar(val, this._id, this._titleText, this._xText, this._yText
Agrietado
}
}
},
Instalado(){
alternar( this._type) {
Caso "LineAndBar":
drawLineAndBar(this._chartData, this._id, this._titleText, this._xText, this.
_yText);
Roto
Caso "LineOrBar":
drawLineOrBar(this._chartData, this._id, this._titleText, this._xText, this . _yText);
Caso "pie" roto:
drawPie(this._chartData, this._id, this._titleText, this._xText, this. _yText);
Roto
Predeterminado:
drawLineAndBar(this._chartData, this._id, this._titleText, this._xText, this ._yText);
Pausa
}
}
Resumen