So verwenden Sie Echarts im Vue-Projekt

So verwenden Sie: 1. Verwenden Sie den Befehl „yarn add echarts“ oder „npm install echarts -S“ oder „cnpm install echarts -S“, um Echarts zu installieren. 2. Verwenden Sie „import echarts from ‚echarts‘ Vue. in main. js.prototyp.$echarts = echarts“ zur Einführung; 3. Rufen Sie einfach die entsprechende API auf der Vue-Seite auf.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Echarts ist eine reine JavaScript-Symbolbibliothek, die mit den meisten Browsern kompatibel ist. Die unterste Ebene basiert auf der leichten Canvas-Klassenbibliothek ZRender, um eine intuitive, lebendige, interaktive und hochgradig personalisierte Datenvisualisierung zu ermöglichen Diagramme. Innovative Drag-and-Drop-Neuberechnungen, Datenansichten, Wertebereichs-Roaming und andere Funktionen verbessern das Benutzererlebnis erheblich und geben Benutzern die Möglichkeit, Daten zu extrahieren und zu integrieren.

Echarts ist eine Framework-unabhängige JS-Diagrammbibliothek, die jedoch auf Js basiert, sodass viele Frameworks sie verwenden können, wie z. B. Vue.

Starten Sie einfach und installieren Sie ECHARTSDie folgenden Installationsmethoden Wählen Sie eine aus Die Versionsnummer ist4.8.0

// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S

Nach dem Login kopieren

Weltweit eingeführtyarn，echarts版本号是4.8.0

import echarts from 'echarts' Vue.prototype.$echarts = echarts

全局引入

在main.js中

到了这一步说明你已经把准备工作做完了

清空多余代码

我们先把页面其他不需要用到的代码给清除吧

创建一个容器

创建一个 id 为EChart的div 作为容器 (使用id会有个小问题，在最后解答)

getRenderer() { console.log(this.$echarts); // 基于准备好的dom，初始化echarts实例 let EChart = this.$echarts.init(document.getElementById("EChart")); // 配置参数 let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; // 设置参数 EChart.setOption(config); },

创建一个方法

mounted() { // 在生命周期中调用 getRenderer 方法 this.getRenderer(); },

生命周期中调用此方法

let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };

请看大屏幕

吃瓜群众：“这特么不是官方示例么？能不能炫一点”

严老师：“说实话确实有点low ，不要慌这才哪到哪呢，我们先从基础讲堂开始嘛”

先了解其参数

先讲讲其中简单的一些配置参数，枯燥乏味，但是摸清楚之后，以后画图那是顺手得一**

先整点简单、常用的来看看（备注里面皆是对应API地址）

let config = { tooltip: {}, legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };

Erstellen Sie einen Container.Erstellen Sie ein Div mit der IDEChart< /code> als Container (die Verwendung der ID führt zu einer kleinen Frage, die am Ende beantwortet wird)

let config = { series: [ { name: "销量", type: "funnel", data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

Erstellen Sie eine Methode

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

Nach dem Login kopieren

Nach dem Login kopieren

Rufen Sie diese Methode während des Lebenszyklus auf

let config = { color:["red","blue","yellow"], legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

Bitte schauen Sie auf den großen Bildschirm

Menschen, die Melonen essen: „Ist nicht“ Ist das kein offizielles Beispiel? Können Sie es ein wenig vorführen?“ Lehrer Yan: „Um ehrlich zu sein, ist es etwas niedrig, keine Panik, fangen wir zuerst mit der Grundvorlesung an.“ "heading-11">Verstehen Sie zunächst die Parameter Lassen Sie uns über einige einfache Konfigurationsparameter sprechen, die langweilig sind, aber nachdem Sie sie berührt haben, ist das Zeichnungsbild ein glattes Bild. /code>address)titleals Diagrammnamehttps://echarts.apache.org/zh/option.html#titlelegend < /code>Als Markierung für ein Diagrammhttps://echarts.apache.org/zh/option.html#legendxAxisAls X -Achse für ein Diagramm https://echarts.apache.org/zh/option.html#xAxisyAxisAls Y-Achse des Diagramms https://echarts.apache.org /zh/option.html#yAxisseriesSerien als Diagrammhttps://echarts.apache.org/zh /option.html#series< tr>colorals Farbliste für Diagrammehttps://echarts.apache.org/zh/option.html#color

掰扯了这么多，估计大家心里也没个底，实战一下吧

来造作一下下

series type

来吧！！展示

折线图

修改折线图,复制上面的config代码

只用修改一处地方，那就是series中的type属性为line即可

let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

饼状图

饼状图，我们也来看看，将type修改为pie

当然我们需要把多余的X轴Y轴配置删除咯,data数据格式也需要修改一下

let config = { tooltip: {}, legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

仪表盘

仪表盘将type修改为gauge

let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

嗯~ 看起来有那么一点味道了

画一个老严的脸

let config = { series: [ { name: "销量", type: "funnel", data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

哈哈哈 倒三角就是老严的脸了 （脑补一下下）

legend

刚刚其实我们已经用到了这个参数噢 ps：饼状图

legend可以作为图表的标记或颜色的名称描述(专业名词：图例)

它的type有两个参数plain || scroll

默认为plain当图表内容比较丰富的时候可以使用scroll可以带有滚动操作

color

都说颜色是Web的灵魂所在，每一个人都是画手

官方默认配色 ：

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

Nach dem Login kopieren

Nach dem Login kopieren

我们也可以自己修改颜色,规则是按数据对应的index找color颜色

例如这样：

let config = { color:["red","blue","yellow"], legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

Nach dem Login kopieren

Nach dem Login kopieren

yAxis

我们还是以线条为参考8

先看看基础篇,我们在y轴声明了一个name

let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"销量", type: 'value' }], series: [{ name:'销量', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] };

Nach dem Login kopieren

但是有时候呢，我们会根据需求，要做一个双Y轴，顾名思义双Y轴，在加一个Y轴就好了

let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }

Nach dem Login kopieren

xAxis

x轴与y轴基本同理，直接改成数组就成为双x轴了

let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] };

Nach dem Login kopieren

到了上面基础篇也就差不多了

使用id为问题所在

其实我们讲了这么多，我们梳理梳理最开始的问题

• id重名怎么办？

• 数据多个渲染怎么办？

答案：使用ref，因为vue是单页面，使用id出现 重名会导致渲染问题

具体怎么使用我们来看看

Nach dem Login kopieren

// 同样的初始化参数 但是我们此次使用的是ref let EChart = this.$echarts.init(this.$refs.EChart) // 配置参数 let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }; // 设置参数 EChart.setOption(config);

Nach dem Login kopieren

相关推荐：vue.js视频教程

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Echarts im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

vue

Quelle：php.cn

Vorheriger Artikel：Was sind die Vor- und Nachteile von Vue? Warum es verwenden? Nächster Artikel：Wann sollte Vue Slot verwenden?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Verstehen Sie den Sentinel in Redis im Detail
  2023-04-26 17:59:18
• [Organisation und Freigabe] 7 beliebte React-Statusverwaltungstools
  2023-04-26 17:47:48
• In einem Artikel wird der Unterschied zwischen Schlüssel in Vue2 und Schlüssel in Vue3 erläutert
  2023-04-26 17:41:42
• Ein Artikel über Speichersteuerung in Node
  2023-04-26 17:37:05
• Praktische Excel-Kenntnisse weitergeben: 4 Tipps zum Löschen doppelter Werte!
  2023-04-26 17:31:25
• Vermittlung praktischer Word-Kenntnisse: Auf diese Weise kann die Konvertierungsfunktion vom Vereinfachten zum Traditionellen genutzt werden!
  2023-04-26 17:27:32
• Wie lassen sich domänenübergreifende Probleme lösen? Eine kurze Analyse gängiger Lösungen
  2023-04-25 19:57:58
• Ein Artikel zum Verständnis des Singleton-Musters in JavaScript
  2023-04-25 19:53:11
• Erfahren Sie mehr über Puffer in Node
  2023-04-25 19:49:11
• Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben
  2023-04-25 19:41:54

Aktuelle Ausgaben

Vue 3 und Vuetify 3 greifen auf SCSS/SASS-Variablen in Komponenten zu Ich möchte vordefinierte Variablen in meiner Vue3-Komponente verwenden.

Parametername	Funktion	Bemerkungen