vueComment implémenter des graphiques de visualisation de données sans Echarts dans le projet ? L'article suivant vous présentera la méthode d'utilisation d'antv pour implémenter des graphiques de visualisation de données dans le projet Vue. J'espère qu'il vous sera utile !

Parlons de la façon dont vue+antv implémente les graphiques de visualisation de données

La technologie ne s'arrête jamais, voir des paysages plus différents

J'étais encore heureux d'ajouter des briques et des tuiles au cadre du terminal mobile, lorsque mon superviseur est venu et m'a demandé si je pouvais libérer une semaine pour faire autre chose . J'en ai été surpris par ce ton. J'ai demandé ce qu'il fallait faire. Il s'est avéré que le service commercial avait un tableau Big Data et qu'il n'y avait pas de personnes supplémentaires pour le faire. Même si j'ai été un peu refusé, le superviseur a parlé et j'ai seulement pu. arrangez-le. J'avais l'habitude d'utiliser echarts pour créer des graphiques visuels. La raison en est que c'était la première fois que je l'utilisais, puis je m'y suis habitué. Cela répond essentiellement aux besoins de mon entreprise et je le connais également. avec des documents. Les personnes qui l'utilisent Il y en a beaucoup, vous pouvez donc trouver rapidement des solutions lorsque vous rencontrez des problèmes. C'est un peu dommage que cette fois le client ne puisse utiliser le antv d'Alibaba que par son nom, je n'ai donc pas d'autre choix. [Recommandations associées : tutoriel vidéo vuejsecharts，原因是第一次用的是它，后来就习惯了，基本上都能满足自己的业务需求，对于文档也比较熟悉，用的人也多，遇到问题就能快速的查到解决方案。有点不幸的是，这次客户指名道姓只能采用阿里的antv，那我也就没有第二个选择了。【相关推荐：vuejs视频教程】

对于antv没有太多的接触，在它刚开源的时候，有去观摩一下，很炫酷，相比于echarts更加好看，不过那时文档没那么全，示例也不是特别多，时至今日再去看，已经很全面了，有多个不同场景系列，常用图表的G2，数据关联图的G6，移动端可视化的F2，以及专注于地图的L7，当然还有对于之前这些基础图表做进一层封装的plot系类，比如@antv/g2plot、@antv/l7plot。这次的开发关于PC的，所以主要会涉及到G2，L7。在开发过程中的感受，使用起来挺简单的，但是有些属性设置文档没有，需要从例子中去查找，然后网上关于它使用的文章也比较少，没有echarts]

Pour antv Quand il était open source, je suis allé l'observer c'était très cool et plus beau que echarts, mais la documentation ne l'était pas. qui étaient complets à l'époque. Il n'y a pas beaucoup d'exemples, mais quand je les regarde aujourd'hui, ils sont très complets. Il existe de nombreuses séries de scènes différentes, telles que G2 pour les graphiques couramment utilisés, . G6 pour les diagrammes d'association de données, F2 pour la visualisation mobile et L7 qui se concentre sur les cartes, et bien sûr, il existe des classes de tracés qui encapsulent davantage ces graphiques de base, tels que @antv/g2plot, @antv/l7plot. Ce développement concerne PC, il implique donc principalement G2 et L7. Mon expérience au cours du processus de développement est qu'il est assez simple à utiliser, mais certains paramètres de propriété ne sont pas documentés et vous devez les trouver à partir d'exemples. Il existe également relativement peu d'articles sur son utilisation sur Internet, pas autant que echarts. Cela peut vous prendre du temps pour trouver la réponse vous-même dans la documentation et les exemples. <strong></strong></code.> </h1>Graphique en zones<p></p> <p>Le graphique linéaire est un graphique fréquemment utilisé et relativement simple. Il n'y a pas de concept de types de graphiques spécifiques (graphique à barres, graphique à nuages de points, graphique linéaire, etc.) dans G2. Les utilisateurs peuvent dessiner différents types. Des graphiques, tels que des diagrammes circulaires, peuvent également être dessinés sous forme de graphiques mixtes, tels qu'une combinaison de graphiques linéaires et de graphiques à barres. Le mélange de graphiques linéaires et de graphiques en aires peut obtenir l'effet illustré. <img src="https://img.php.cn/upload/image/593/213/231/1663549162670203.png" title="1663549162670203.png" alt="Parlons de la façon dont vue+antv implémente les graphiques de visualisation de données"></p> <h2 data-id="heading-2"><strong></strong></h2>Documents de paramètres couramment utilisés. <h3 data-id="heading-3"><strong></strong></h3> Chart<table> <thead> <tr class="firstRow"> <th></th> <th>Attribut</th> <th>Description</th> <th>Type</th> </tr>Valeur par défaut</thead> <tbody> <tr> <td></td> <td>container</td> <td>Spécifiez le DOM dessiné par le graphique Vous pouvez passer. s dans l'identifiant DOM ou transmettre directement l'instance dom</td> <td> string | HTMLElement</td> </tr>-<tr> <td></td> <td>autoFit</td> <td>Le graphique s'adapte-t-il à la largeur et à la hauteur du conteneur Si l'utilisateur définit la hauteur, la hauteur définie par l'utilisateur prévaudra</td> <td>booléen</td> "faux" </tr> <tr>remplissage du graphique<td></td>'auto'|numéro |numéro []<td></td>'auto' <td></td> <td> </td> </tr> <tr>Échelle de mesure<td></td> <td></td> <td></td>Attribut<td></td>Description</tr> <tr>Type<td></td>Valeur par défaut<td></td> <td></td> <td> </td>min</tr> </tbody>Définissez la valeur minimale du système de coordonnées correspondant </table> <h3 data-id="heading-4">any<strong> </strong>-</h3> <table> <thead><tr class="firstRow">max<th> </th>Définissez la valeur minimale du système de coordonnées correspondant<th></th>any<th></th>-<th></th> </tr></thead>range<tbody> <tr>La plage de dessin du système de coordonnées n'a généralement pas besoin d'être modifiée<td> </td>[numéro,numéro]<td></td>[0, 1]<td></td> <td></td>alias</tr> <tr>L'alias d'affichage du champ de données, généralement utilisé pour définir le nom chinois correspondant du champ<td></td>string<td></td>-<td></td> <td></td>nice Ajuster automatiquement min, max value</tr> <tr> <td></td> <td></td>showTitle<td></td>S'il faut afficher le titre de l'info-bulle<td></td>boolean</tr> <tr>false<td></td> <td></td>shared <td></td>true signifie fusionner toutes les données correspondant au point actuel et Display, false signifie afficher uniquement le contenu des données le plus proche du point actuel<td></td>boolean</tr> <tr>false<td></td> <td> </td>showCrosshairs<td></td>S'il faut afficher les lignes auxiliaires des info-bulles. <td></td>booléen</tr> </tbody>faux</table> <h3 data-id="heading-5"> <strong></strong>Axe du système de coordonnées <h3 data-id="heading-6">objet nul | -<strong> </strong> </h3> </h3> <table>tickLine<thead><tr class="firstRow"> Élément de configuration de la ligne de graduation de l'axe de coordonnées, null signifie ne pas afficher <th></th>null | object<th></th>-<th></th> <th></th>grid</tr></thead> Élément de configuration de la ligne de grille de l'axe de coordonnées, null signifie ne pas afficher <tbody> <tr>null | object<td></td>-<td></td> <td></td> <td></td>chart.line(options)</tr> <tr> <td> est utilisé pour dessiner des graphiques en courbes, des graphiques en courbes, des graphiques en lignes par étapes, etc. </td> <td></td>chart.area(options)<td></td> <td> est utilisé pour dessiner des graphiques en aires (graphiques en aires), des graphiques en aires empilées, des graphiques en aires par intervalles, etc. </td> </tr> <tr>geom.position()<td></td> <td>Configurer les règles de mappage des canaux de position</td> <td>Exemple : </td> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 数据结构: [{ x: 'A', y: 10, color: 'red' }] geom.position('x*y');</pre><div class="contentsignin">Copier après la connexion</div></div> <td></td>geom.color()</tr> </tbody> </table>Configurer la couleur du graphique<h3 data-id="heading-7"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 基础颜色设置 geom.color('#1890ff'); // 渐变 geom.color("l(90) 0:#0b83de 1:#0c1c2d")</pre><div class="contentsignin">Copier après la connexion</div></div> <strong></strong>geom.shape()</h3> <p></p>Graphique lié paramètres , la description dans le document n'est pas très complète, vous pouvez obtenir les informations correspondantes à partir de l'exemple de graphique <h3 data-id="heading-8"><strong></strong></h3> <p> attribut </p> <h3 data-id="heading-9"> description <strong></strong> </h3> <p></p> <p>smooth</p> <h3 data-id="heading-10"> est utilisé pour les paramètres de lissage des graphiques linéaires<strong></strong> </h3> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <div></div> </template> <script> import { Chart } from "@antv/g2"; export default { mounted() { // 数据源 const data = [ { time: "8/1", value: 240 }, { time: "8/10", value: 600 }, { time: "8/20", value: 350 }, { time: "8/31", value: 470 }, ]; // 初始化图表，列出图表属性 const chart = new Chart({ container: "container", autoFit: true, height: 276, padding: [100, 20, 30, 40], }); // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("time*value") // 前面为x轴，所以 time 为 x 轴， value 为 y 轴 chart.data(data); // 度量 // x，y轴坐标系是根据 chart.scale({ // y轴坐标系设置 value: { min: 0, nice: true, alias: "用户", }, // x轴坐标系设置 time: { range: [0, 1], }, }); // 提示信息 chart.tooltip({ // 是否显示辅助线 showCrosshairs: true, // 是否合并所有点展示 shared: false, }); // value 坐标系设置 chart.axis("value", { grid: null, tickLine: null, }); // time 坐标系设置 chart.axis("time", { line: null, tickLine: null, }); // 图表绘制设置 // 面积图 chart .area() .position("time*value") .color("l(90) 0:#0b83de 1:#0c1c2d") .shape("smooth"); // 折线图 chart.line().position("time*value").color("#0b83de").shape("smooth"); // 渲染图表 chart.render(); }, }; </script></pre><div class="contentsignin">Copier après la connexion</div></div> <h3 data-id="heading-11">bar chart<strong> </strong> </h3>Les graphiques à barres sont couramment utilisés dans l'analyse quotidienne des données et sont relativement intuitifs. Ici, j'ai répertorié certains des attributs utilisés. D'autres sont cohérents avec les documents de paramètres courants ci-dessus<p></p> <table> <thead><tr class="firstRow"> <th>étiquette d'étiquette de données. </th> <th></th> </tr></thead> <tbody>Propriété<tr> <td>Description</td> <td>Type</td> </tr>Valeur par défaut</tbody> </table> <h2 data-id="heading-12"><strong></strong></h2>offset<p></p>Distance de décalage par rapport au point de données<p><img src="https://img.php.cn/upload/image/961/144/906/1663549185815910.png" title="1663549185815910.png" alt="Parlons de la façon dont vue+antv implémente les graphiques de visualisation de données">numéro</p> <h3 data-id="heading-13">- <strong></strong> </h3> <table>offsetX <thead><tr class="firstRow">par rapport aux données point dans la direction X La distance de décalage <th></th>number<th></th>-<th></th> <th></th>offsetY</tr></thead> par rapport à la distance de décalage du point de données dans la direction Y <tbody> <tr>number<td></td>-<td></td> <td></td>style<td></td> attribut graphique de texte style, vous devez utiliser pour définir le remplissage de couleur</tr> <tr>number<td></td>-<td></td> <td></td> <td></td>chart.coordonnée()</tr> <tr> <td>paramètres du système de coordonnées du graphique</td> <td></td> <td></td>property<td></td>description</tr> <tr>type<td> </td>par défaut value<td> </td> <td></td> <td></td>rotate</tr> </tbody> Configurez le degré de rotation, utilisez le système radian </table> <h3 data-id="heading-14">number<strong></strong>-</h3> <p></p> <table>reflect<thead><tr class="firstRow"> pour refléter le long de la direction x ou cartographier le long de l'axe y <th></th>x y<th> | </th>-<th></th> <th></th>échelle</tr></thead> le long de x et y Rapport d'échelle directionnelle<tbody> <tr>nombre, nombre<td></td>-<td></td> <td></td>transpose<td></td>x, déplacement sur l'axe y, couramment utilisé pour la conversion entre les graphiques à barres et les histogrammes</tr> <tr>- <td></td>-<td></td> <td></td> <td></td>chart .interval(options)</tr> <tr> <td> est utilisé pour dessiner des graphiques à barres, des histogrammes, des graphiques en rose Nightingale, des diagrammes circulaires, des graphiques à barres et en anneaux (graphiques en jade), des graphiques en entonnoir, etc. </td> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <div></div> </template> <script> import { Chart } from "@antv/g2"; export default { mounted() { // 数据源 const data = [ { type: "香蕉", value: 460 }, { type: "苹果", value: 600 }, { type: "菠萝", value: 390 }, { type: "榴莲", value: 205 }, ]; // 初始化图表 const chart = new Chart({ container: "container", autoFit: true, height: 276, padding: [50, 60, 10, 60], }); // 关联数据 chart.data(data); // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("type*value") // 前面为x轴，所以 type 为 x 轴， value 为 y 轴 // 设置 x 轴坐标系 chart.axis("type", { grid: null, tickLine: null, line: null, }); // 设置 y 轴坐标系 chart.axis("value", { grid: null, label: null, }); // 隐藏图例 chart.legend(false); // x，y 轴置换 chart.coordinate().transpose(); // chart.interval(options) 柱状图 // geom.position() 配置 position 通道映射规则 // geom.size 设置图形大小 // geom.color 设置图形颜色 // geom.label 数据标签设置 chart .interval() .position("type*value") .size(12) .color("#678ef2") .label("value", { style: { fill: "#8d8d8d", }, offset: 10, }); chart.interaction("element-active"); // 渲染图形 chart.render(); }, }; </script></pre><div class="contentsignin">Copier après la connexion</div></div> <td></td>Map<td></td> <td> <code>antvLe document ne décrit pas entièrement la carte, comme le niveau de la carte viewLevel, les paramètres des limites de la carte et la configuration des couleurs de la carte. combiné avec des exemples Après une exploration lente, j'ai implémenté les cartes de Chine les plus couramment utilisées, y compris toolTip et les nuages de points des provinces tant que je modifie le niveau de la carte viewLevel et. Faites correspondre les données correspondantes, je peux obtenir des résultats différents. Voici les nuages de points des provinces et des villes, afin que chacun puisse tirer des conclusions. J'utilise @antv/l7plot, et le dessin lié à la carte est packagé en interne. Si @antv/l7 est utilisé, il est principalement basé sur le chemin de la carte demandé. . La demande de données de coordonnées est dessinée et les données sont assez volumineuses, ce qui sera plus gênant. Je ne mettrai pas l'image ici, vous pouvez l'exécuter sur Github pour afficher la carte des éléments de configuration du conteneur de carte

AttributsDescription

Type

Valeur par défaut

antv文档对于地图的描述不是特别全，比如地图等级viewLevel、地图边界设置、地图颜色配置，这些都要结合实例慢慢摸索，我实现了比较常用的中国地图，包含toolTip，以及省的散点图，只要修改地图等级viewLevel，配合相应数据就能实现不同省市的散点图了，大家可以举一反三。

我这边是采用@antv/l7plot，内部就分装了地图相关绘制，如果采用是@antv/l7

type

Type de carte de base de carte, amap : carte Gaode, mapbox : carte Mapbox

string

amap

centerpasAngle d'inclinaison initialNiveau de zoom initialStyle intégré : sombre : sombre, clair : clair, normal : normal, vide : aucun Carte de baseS'il faut afficher le logo

Latitude et longitude initiales du centre numéro[] [0, 0]

numéro 0 zoom

numéro 0 style

chaîne foncé logo

booléen

true

地图等级 viewLevel

属性	说明
level	层级国家；"country"、省份："province"、市："city"、县："district"
adcode	层级编码中国；100000、浙江省："330000"、杭州市："330100"、西湖区："330106"

<template>
  <div></div>
</template>
<script>
import { Choropleth } from "@antv/l7plot";
// 地图数据
import data from "../data/userMap";
export default {
  mounted() {
    // 初始化地图
    // eslint-disable-next-line no-unused-vars
    const map = new Choropleth("container", {
      // 地图容器配置
      map: {
        type: "mapbox",
        style: "blank",
        center: [120.19382669582967, 30.258134],
        zoom: 3,
        pitch: 0,
        logo: false,
      },
      // 关联数据
      source: {
        data: data,
        joinBy: { sourceField: "code" },
      },
      // 地图等级
      viewLevel: {
        level: "country",
        adcode: 100000,
      },
      // 根据容器宽高自定义图表
      autoFit: true,
      // 设置地图颜色
      color: {
        field: "value",
        value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
        scale: { type: "quantile" },
      },
      // 边框
      chinaBorder: {
        // 国界
        national: null,
        // 争议
        dispute: { color: "#ccc", width: 1, opacity: 0.8, dashArray: [2, 2] },
        // 海洋
        coast: { color: "#ccc", width: 0.7, opacity: 0.8 },
        // 港澳
        hkm: { color: "gray", width: 0.7, opacity: 0.8 },
      },
      // 边界颜色
      style: {
        opacity: 1,
        stroke: "rgb(93,112,146)",
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      // 数据标签
      label: {
        visible: false,
      },
      // 选择高亮
      state: {
        active: { stroke: "black", lineWidth: 1 },
      },
      // 提示
      tooltip: {
        inPlot: false,
        items: ["name", "code", "value"],
      },
    });
  },
};
</script>
<style>
#container {
  width: 100%;
  height: 300px;
}
</style>

Copier après la connexion