vueWie implementiert man Datenvisualisierungsdiagramme ohne Echarts im Projekt? Der folgende Artikel stellt Ihnen die Methode zur Verwendung von antv zur Implementierung von Datenvisualisierungsdiagrammen im Vue-Projekt vor. Ich hoffe, er wird Ihnen hilfreich sein!
Technologie hört nie auf, sehen Sie noch mehr unterschiedliche Landschaften
Ich war immer noch voller Freude damit, Steine und Kacheln zum mobilen Terminal-Framework hinzuzufügen, als mein Vorgesetzter vorbeikam und mich fragte, ob ich mir eine Woche Zeit nehmen könnte, um andere Dinge zu tun . Ich bin von diesem Ton etwas überrascht. Ich fragte, was zu tun sei, und es stellte sich heraus, dass es keine zusätzlichen Leute gab, die dafür zuständig waren. Obwohl mir der Vorgesetzte etwas verweigerte, konnte ich nur antworten arrangiere es. Ich habe bei der Erstellung visueller Diagramme echarts verwendet. Der Grund dafür ist, dass ich es zum ersten Mal verwendet habe, und dann habe ich mich daran gewöhnt. Es kann grundsätzlich meine Geschäftsanforderungen erfüllen, und das tue ich auch Mit Dokumenten vertraut Es gibt viele, sodass Sie bei Problemen schnell Lösungen finden können. Leider konnte der Kunde dieses Mal Alibabas antv nur namentlich verwenden, sodass ich keine zweite Wahl hatte. [Verwandte Empfehlungen: vuejs Video-Tutorialecharts，原因是第一次用的是它，后来就习惯了，基本上都能满足自己的业务需求，对于文档也比较熟悉，用的人也多，遇到问题就能快速的查到解决方案。有点不幸的是，这次客户指名道姓只能采用阿里的antv，那我也就没有第二个选择了。【相关推荐：vuejs视频教程】
对于antv没有太多的接触，在它刚开源的时候，有去观摩一下，很炫酷，相比于echarts更加好看，不过那时文档没那么全，示例也不是特别多，时至今日再去看，已经很全面了，有多个不同场景系列，常用图表的G2，数据关联图的G6，移动端可视化的F2，以及专注于地图的L7，当然还有对于之前这些基础图表做进一层封装的plot系类，比如@antv/g2plot、@antv/l7plot。这次的开发关于PC的，所以主要会涉及到G2，L7。在开发过程中的感受，使用起来挺简单的，但是有些属性设置文档没有，需要从例子中去查找，然后网上关于它使用的文章也比较少，没有echarts]
antv. Als es zum ersten Mal Open Source war, habe ich es mir angesehen. Es war sehr cool und schöner als echarts, aber die Dokumentation war es nicht Damals gab es nicht viele Beispiele, aber wenn ich sie mir heute anschaue, sind sie sehr umfangreich. Es gibt viele verschiedene Szenenserien, wie zum Beispiel G2 für häufig verwendete Diagramme, G6 für Datenassoziationsdiagramme, F2 für die mobile Visualisierung und L7, das sich auf Karten konzentriert, und natürlich gibt es Plotklassen, die diese grundlegenden Diagramme weiter kapseln. wie zum Beispiel @ antv/g2plot, @antv/l7plot. Bei dieser Entwicklung geht es um PC, es handelt sich also hauptsächlich um G2 und L7. Ich habe während des Entwicklungsprozesses die Erfahrung gemacht, dass es recht einfach zu verwenden ist, aber einige Eigenschaftseinstellungen sind nicht dokumentiert und Sie müssen sie anhand von Beispielen finden. Es gibt auch relativ wenige Artikel über seine Verwendung im Internet, nicht so viele wie echarts Es kann einige Zeit dauern, bis Sie die Antwort in der Dokumentation und den Beispielen selbst finden.
Liniendiagramm ist ein häufig verwendetes und relativ einfaches Diagramm. In G2 gibt es kein Konzept für bestimmte Diagrammtypen (Balkendiagramm, Streudiagramm, Liniendiagramm usw.). B. Kreisdiagramme, können auch als gemischte Diagramme, beispielsweise als Kombination aus Liniendiagrammen und Balkendiagrammen, gezeichnet werden. Der gezeigte Effekt kann erzielt werden 
| Typ | Standardwert | ||
|---|---|---|---|
| string |. HTMLElement | - | autoFit | |
| boolean | false | width | |
| number | - | height | |
| number | - | padding | |
| 'auto'|Nummer |Nummer [] | 'auto' |
| Typ | Standardwert | ||
|---|---|---|---|
| any | - | max | |
| any | - | range | |
| [Nummer, Zahl] | [0, 1] | Alias | |
| Zeichenfolge | - | nett | |
| boolean | false |
| Typ | Standardwert | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| boolean | false | shared | |||||||||||||||||||||||||||||||||||||||||||||||
| boolean | false | Crosshairs anzeigen | |||||||||||||||||||||||||||||||||||||||||||||||
| boolean | false |
Koordinatensystemachse
wird zum Zeichnen von Flächendiagrammen (Flächendiagrammen), gestapelten Flächendiagrammen, Intervallflächendiagrammen usw. verwendet. ?? Diagrammbezogene Einstellungen Die Anweisungen im Dokument sind nicht sehr vollständig. Die entsprechenden Informationen können Sie dem Diagrammbeispiel entnehmen Balkendiagramm// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');Nach dem Login kopieren
Balkendiagramme werden häufig in der täglichen Datenanalyse verwendet und sind relativ intuitiv. Hier habe ich einige der verwendeten Attribute aufgelistet, die mit den oben genannten allgemeinen Parameterdokumenten übereinstimmen ??offsetX relativ zu den Daten Punkt in der Stil, den Sie verwenden müssen, um die Farbfüllung festzulegenStandard WertRotate Konfigurieren Sie den Rotationsgrad, verwenden Sie das Radian-SystemNumber-reflect, um entlang der y-Achse x | y
wird zum Zeichnen von Balkendiagrammen, Histogrammen, Nachtigall-Rosendiagrammen, Kreisdiagrammen, Balken- und Ringdiagrammen (Jadediagrammen), Trichterdiagrammen usw. verwendet. Map
// 基础颜色设置
geom.color('#1890ff');
// 渐变
geom.color("l(90) 0:#0b83de 1:#0c1c2d")Nach dem Login kopieren
@antv/l7plot, der kartenbezogene Zeichnungen intern verteilt. Wenn @antv/l7 verwendet wird, wird hauptsächlich der Kartenpfad angefordert wird gezeichnet, und die Daten sind ziemlich groß, was problematischer sein wird. Ich werde das Bild hier nicht einfügen, Sie können es auf Githubausführen, um die
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>Nach dem Login kopieren 小结如果你还没了解antv，现在它应该进入你的视野了，他提供了很多炫酷的图表，以及强大的图表功能，就算现在用不到，下次做个尝试也未尝不可，可能你会喜欢上它，并且替换掉 就举这些图表例子了，文章相关的例子源码也上传到Github了。这次开发过程中，也是把 |
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie vue+antv Datenvisualisierungsdiagramme implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
