Maison > Article > interface Web > Parlons de la façon dont vue+antv implémente les graphiques de visualisation de données
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 !
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
]
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 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. Type
antv
文档对于地图的描述不是特别全,比如地图等级viewLevel
、地图边界设置、地图颜色配置,这些都要结合实例慢慢摸索,我实现了比较常用的中国地图,包含toolTip
,以及省的散点图,只要修改地图等级viewLevel
,配合相应数据就能实现不同省市的散点图了,大家可以举一反三。
我这边是采用@antv/l7plot
,内部就分装了地图相关绘制,如果采用是@antv/l7
Type de carte de base de carte, amap : carte Gaode, mapbox : carte Mapbox
stringLatitude 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
<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> 小结如果你还没了解antv,现在它应该进入你的视野了,他提供了很多炫酷的图表,以及强大的图表功能,就算现在用不到,下次做个尝试也未尝不可,可能你会喜欢上它,并且替换掉 就举这些图表例子了,文章相关的例子源码也上传到Github了。这次开发过程中,也是把 |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!