Synthèse des ressources de cas echarts sur l'ensemble du réseau et utilisation efficace des echarts (version détaillée)

Introduction.

Comme nous le savons tous, dans l'environnement de développement actuel, la proportion de projets de visualisation de données (grand écran) dans le développement front-end augmente. Et le plugin le plus utilisé est sans conteste Apache Echarts . (ps : ci-après dénommés echarts). Cet article combine le framework vue pour expliquer comment utiliser les echarts dans les projets rapidement, efficacement et élégamment. Bien sûr, à la fin de cet article, nous préparerons avec soin la collection la plus complète et la plus efficace de stations de ressources de cas d'écharts sur Internet pour les lecteurs .

2. Instructions et compétences des echarts dans le projet vue.

Dépendances et précautions d'installation et méthodes de manipulation correspondantes.

illustrer:

Si le dernier package de dépendances echarts est directement installé dans vue, une exception de méthode init indéfinie d'echarts peut être signalée lors de l'exécution. Dans ce cas, vous pouvez désinstaller la version actuelle du package de dépendances echarts et réinstaller la version stable spécifiée (par exemple v4 .8.0) . S'il est toujours signalé que init n'est pas défini à ce moment, il peut être résolu en l'important dans le fichier d'entrée main.js de cette manière---- import * as echarts from 'echarts' .

Code principal et légende :

//常规安装
 
npm install echarts --save
 
 
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
 
npm uninstall echarts --save   //卸载当前安装的ECahrts依赖
 
npm install [email protected] --save     //重新安装低版ECahrts依赖
 
复制代码

La composition en composants réalise la gestion indépendante de chaque graphique echarts pour éviter les couplages inutiles.

illustrer:

Le composant principal (composant parent) n'est utilisé que pour stocker la zone de contenu principale et la boîte externe correspondant au graphique echrts ; le composant enfant est utilisé pour implémenter le conteneur réel pour charger le graphique entier et réaliser le rendu des données et du graphique du tableau correspondant.

Code de base :

父组件：

<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>

复制代码

point important:

Divisez les données et le dessin du graphique echarts en deux parties et traitez-les séparément, ce qui est clair en un coup d'œil et a une hiérarchie claire.
真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
组件销毁时要重置（销毁）图表。
为了提高用户体验感，强烈建议为图表容器加上loading状态。

效果图：

三. 全网最全的echarts图表案例和实例资源站整理。

资源一：分享你我 （推荐指数：⭐⭐⭐⭐）

优点：案例资源丰富，有主体分类，可检索，访问速度较快。
缺点：未做分页。

资源二：ISWWQ.com （推荐指数：⭐⭐⭐⭐）

优点：案例资源丰富，可检索，有主体分类。
缺点：未做分页，访问速度较慢。

资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）

优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
缺点：暂无。

资源四：ECHARTS社区 （推荐指数：⭐⭐⭐）

优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
缺点：访问速度慢，有广告。

资源五：Made A Pie （推荐指数：⭐⭐⭐⭐）

优点：案例资源丰富，可检索，有主体分类。
缺点：访问速度较慢，未做分页。

资源六：ECharts官方案例 （推荐指数：⭐⭐⭐⭐⭐）

优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
缺点：案例资源较少，未做分页，未提供检索。

资源七：chartsdev.com （推荐指数：⭐⭐）

Avantages : Les ressources de cas sont abondantes, avec une classification par sujet.
Inconvénients : la vitesse d'accès est moyenne, il ne peut pas être utilisé tel quel, la mise en page est médiocre et l'applicabilité est médiocre.

Ressource 8 : Imitation ECharts (Indice de recommandation : ⭐⭐⭐)

Avantages : les ressources sont relativement stables et l'effet d'icône se charge plus rapidement.
Inconvénients : moins de ressources de cas, pas de pagination, pas de récupération, etc.

Ressource 9 : DataInsight (Indice de recommandation : ⭐⭐)

Avantages : Les ressources de cas sont abondantes.
Inconvénients : vitesse d'accès lente, pas de classification par sujet, pas de récupération, etc.

Ressource 10 : Alibaba Cloud - le code source et le diagramme du cas Make A Pie de la communauté officielle ECharts (index recommandé : ⭐⭐⭐⭐⭐ )

Avantages : Fournir tous les codes sources de cas et les légendes correspondantes du site Web Make A Pie de la communauté officielle ECharts d'origine, qui peuvent être consultés et développés dans une communauté ou un site Web de ressources partagées.
Inconvénients : Non implémenté hors de la boîte.
Description : Code d'extraction : 6l3t .

Ressource 11 : Baidu Cloud - Le code source et le diagramme du cas Make A Pie de la communauté officielle originale d'ECharts (index recommandé : ⭐⭐⭐⭐⭐ )

Avantages : Fournir tous les codes sources de cas et les légendes correspondantes du site Web Make A Pie de la communauté officielle ECharts d'origine, qui peuvent être consultés et développés dans une communauté ou un site Web de ressources partagées.
Inconvénients : Non implémenté hors de la boîte.
Description : Code d'extraction : qqsy .