I. Introducción.
Como todos sabemos, en el entorno de desarrollo actual, la proporción de proyectos de visualización de datos (pantalla grande) en el desarrollo front-end está aumentando. Y el plugin más utilizado es sin duda Apache Echarts . (pd: en lo sucesivo, echarts). Este artículo combina el marco vue para explicar cómo usar echarts en proyectos de forma rápida, eficiente y elegante. Por supuesto, al final de este artículo, prepararemos cuidadosamente la colección más completa y eficiente de estaciones de recursos de casos de echarts en Internet para los lectores .
2. Instrucciones y habilidades de echarts en el proyecto vue.
- Dependencias y precauciones de instalación y métodos de manipulación correspondientes.
- ilustrar:
Si el paquete de dependencia de echarts más reciente se instala directamente en vue, es posible que se informe una excepción del método init init de echarts en tiempo de ejecución. En este caso, puede desinstalar la versión actual del paquete de dependencia de echarts y reinstalar la versión estable especificada (por ejemplo, v4 .8.0) . Si todavía se informa que init no está definido en este momento, se puede solucionar importándolo en el archivo de entrada main.js de esta manera---- import * as echarts from 'echarts' .
- Código central y leyenda:
//常规安装
npm install echarts --save
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
npm uninstall echarts --save //卸载当前安装的ECahrts依赖
npm install [email protected] --save //重新安装低版ECahrts依赖
复制代码- La componenteización realiza la gestión independiente de cada carta de echarts para evitar acoplamientos innecesarios.
- ilustrar:
El componente principal (componente principal) solo se usa para almacenar el área de contenido principal y el cuadro externo correspondiente al gráfico echrts; el componente secundario se usa para implementar el contenedor real para cargar todo el gráfico y realizar la representación de datos y gráficos del gráfico correspondiente.
- Código central:
父组件：
<div class="p-section bg">
<div class="p-title">业务类型占比</div>
<!--以下为子组件-->
<ywlxzbChart></ywlxzbChart>
</div>
复制代码子组件（echarts图表核心）：
<template>
<div
id="ywlx"
style="width: 100%; height: 195px"
v-loading="ywlezbLoading"
></div>
</template>
<script>
import echarts from "echarts";
import * as API from "api/home.js";
export default {
data() {
return {
ywlezbLoading: false,
myChartLine: null,
formData: [],
nameData: [],
};
},
name: "ywlxzbChart",
methods: {
//获取数据,Promise确保执行和绘画顺序
getProfessionalCardsCount() {
return new Promise((resolve, reject) => {
this.ywlezbLoading = true;
API.getProfessionalCardsCount()
.then((res) => {
this.ywlezbLoading = false;
if (res.code == 200) {
this.formData = res.data.professions;
this.nameData = [];
this.formData.map((i) => {
this.nameData.push(i.name);
});
}
resolve(res);
})
.catch((err) => {
this.ywlezbLoading = false;
reject(err);
});
});
},
myEcharts() {
// 基于准备好的dom，初始化echarts实例
this.myChartLine = echarts.init(document.getElementById("ywlx"));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
color: ["#31ceee", "#20adeb", "#6be7e8"],
legend: {
orient: "vertical",
x: "right",
align: "left",
padding: [10, 5, 0, 0],
data: this.nameData,
formatter: function (name) {
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value;
for (var i = 0; i < option.series[0].data.length; i++) {
if (name == oa[i].name) {
return name;
}
}
},
},
series: [
{
name: "业务类型占比",
type: "pie",
radius: "68%",
center: ["40%", "50%"],
data: this.formData,
itemStyle: {
normal: {
label: {
show: true,
// position:'inside',
formatter: "{b}: {d}%",
},
},
labelLine: { show: true },
},
labelLine: {
normal: {
length: 1,
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
this.myChartLine.setOption(option);
},
},
mounted() {
//图的大小自适应
window.addEventListener("resize", () => {
if (this.myChartLine) {
this.myChartLine.resize();
}
});
this.getProfessionalCardsCount().then((res) => {
this.myEcharts();
});
},
beforeDestroy() {
//实例销毁之前调用
if (!this.myChartLine) {
return;
}
this.myChartLine.dispose();
this.myChartLine = null;
},
};
</script>
<style>
</style>
复制代码- punto importante:
- Divida los datos y el dibujo de la tabla de echarts en dos partes y trátelos por separado, lo cual es claro de un vistazo y tiene una jerarquía clara.
- 真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
- 组件销毁时要重置（销毁）图表。
- 为了提高用户体验感，强烈建议为图表容器加上loading状态。
- 效果图：
三. 全网最全的echarts图表案例和实例资源站整理。
- 资源一：分享你我 （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类，可检索，访问速度较快。
- 缺点：未做分页。
- 资源二：ISWWQ.com （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：未做分页，访问速度较慢。
- 资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
- 缺点：暂无。
- 资源四：ECHARTS社区 （推荐指数：⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
- 缺点：访问速度慢，有广告。
- 资源五：Made A Pie （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：访问速度较慢，未做分页。
- 资源六：ECharts官方案例 （推荐指数：⭐⭐⭐⭐⭐）
- 优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
- 缺点：案例资源较少，未做分页，未提供检索。
- 资源七：chartsdev.com （推荐指数：⭐⭐）
- Ventajas: Los recursos de casos son abundantes, con clasificación temática.
- Desventajas: la velocidad de acceso es promedio, no se puede usar directamente, el diseño es deficiente y la aplicabilidad es deficiente.
- Recurso 8: Gráficos electrónicos de imitación (Índice de recomendación: ⭐⭐⭐)
- Ventajas: los recursos son relativamente estables y el efecto del ícono se carga más rápido.
- Desventajas: menos recursos de casos, sin paginación, sin recuperación, etc.
- Recurso 9: DataInsight (Índice de recomendación: ⭐⭐)
- Ventajas: Los recursos del caso son abundantes.
- Inconvenientes: velocidad de acceso lenta, sin clasificación de temas, sin recuperación, etc.
- Recurso 10: Alibaba Cloud: la comunidad oficial original de ECharts Make A Pie, código fuente y diagrama (índice recomendado: ⭐⭐⭐⭐⭐ )
- Ventajas: proporcione el código fuente de todos los casos y las leyendas correspondientes del sitio web Make A Pie de la comunidad oficial original de ECharts, que se puede ver y desarrollar en una comunidad o sitio web de recursos compartidos.
- Contras: No se implementa de forma inmediata.
- Descripción: Código de extracción: 6l3t .
- Recurso 11: Baidu Cloud: código fuente y diagrama del caso Make A Pie de la comunidad oficial original de ECharts (índice recomendado: ⭐⭐⭐⭐⭐ )
- Ventajas: proporcione el código fuente de todos los casos y las leyendas correspondientes del sitio web Make A Pie de la comunidad oficial original de ECharts, que se puede ver y desarrollar en una comunidad o sitio web de recursos compartidos.
- Contras: No se implementa de forma inmediata.
- Descripción: Código de extracción: qqsy .